滋賀レイクスVS千葉ジェッツの試合を見に、滋賀ダイハツアリーナへ。
久しぶりの千葉ジェッツ観戦で、富樫の凄さを実感!
明日は勝ってね。
サウナ好きのつぶやき3

滋賀レイクスVS千葉ジェッツの試合を見に、滋賀ダイハツアリーナへ。
久しぶりの千葉ジェッツ観戦で、富樫の凄さを実感!
明日は勝ってね。
概要
架空の大学サイトを静的HTMLからWordPressへ移行する課題に取り組みました。カスタム投稿タイプやサイドバー、検索フォームの実装など、サイト運営者がコーディング知識なしで情報更新できるCMS構築を目指しました。
実装内容
・カスタム投稿タイプ・ウィジェット対応サイドバー・検索フォーム・投稿ページテンプレート
使用技術
・WordPress(テーマ開発・カスタマイズ)
・PHP / HTML / CSS / JavaScript
概要
見本デザインをもとに、模写コーディングで制作した架空のプロフィールサイト。HTML / CSS / JavaScriptを使用し、シンプルながらも動きのある表現を取り入れた、印象に残るデザインに仕上がりました。
制作のポイント
・模写コーディングによる実装力の向上:構造やレイアウト、動きの再現を通じて、フロントエンドの理解を深めながら制作
・ユーザーの目を引く動きの演出:アニメーション効果を加えることで、シンプルな中に動きと奥行きを演出
・レスポンシブ対応:スマートフォンでも見やすい構成に調整
主な機能/実装内容
・カルーセル・リンクホバー時のアニメーション
・スクロールに合わせたフェードイン表示・モーダルウィンドウ
使用技術
・HTML / CSS / JavaScript
概要
WordPressのオリジナルテーマを用いて、清潔感のあるWebサイトを一から制作。白を基調に、ブルーとグリーンをアクセントに使用、年齢や性別を問わず、誰でも見やすく使いやすいデザインを意識しています。デザイン・コーディング・WordPress組み込みまで行いました。
デザインと設計のポイント
・清潔感のある配色設計:白をベース、ブルーとグリーンをアクセントに安心感を演出
・視認性を意識したUI:文字サイズや行間、余白設計にも配慮、誰でも快適に閲覧できるデザインに
・スマートフォン対応:レスポンシブ設計、スマホではヘッダー・フッターを常時固定、操作性を向上
ユーザビリティ向上の工夫
・CTAボタンの設置:画面右上に予約ボタンを配置、ユーザーのアクションを促進
・スクロール後の固定ヘッダー:ヘッダーが画面外に出た後に固定表示、邪魔にならず利便性も確保
・予約までの導線:予約ボタンを配置し、ユーザーが迷わずアクセスできる設計
使用技術
・WordPress(完全オリジナルテーマ)
・HTML / SCSS / JavaScript / PHP
・レスポンシブデザイン
概要
初めて制作した架空のIT企業のコーポレートサイト。HTML / CSS / jQuery を使用し、ハンバーガーメニューやカルーセル、ボタンアニメーションなど、基本的なフロントエンドの技術を取り入れながら、スマートフォンにも対応したレスポンシブ設計を実現しました。
制作のポイント
・シンプルで分かりやすい構成:訪問者が迷わず情報にたどり着けるよう、コンテンツの流れや視線誘導を意識した設計
・スマートフォン対応:ハンバーガーメニューやレイアウト調整で、モバイルでも快適な閲覧体験を実現
・アニメーションによる動きの演出:jQueryを使って、カルーセルスライダーやボタンにアニメーション効果を追加し、静的なページに動きを加えました
使用技術
・HTML / CSS、jQuery
概要
架空化粧品ブランドサイトを、企画からデザイン・構成・実装まで一貫して手がけました。「STUDIO」を用いた初めてのWebサイト制作で、UI設計・ビジュアル表現・ブランドコンセプトの落とし込みを重視しました。
コンセプト
ブランド名のイメージを、「宝石と花を融合させたようなナチュラルで上品な世界観」をテーマに設定。植物成分を配合したやさしい化粧品ブランドであることを伝えるため、配色にはラベンダートーンを基調に、やわらかく透明感のあるデザインを意識しました。
工夫したポイント
・ユーザーに安心感を与える、シンプルで見やすいレイアウト設計
・花や自然素材を連想させる画像・配色の選定
・ブランドロゴ・イメージビジュアルも自作し、トータルの世界観を統一
・製品の特徴が直感的に伝わるよう、余白を活かしたミニマルなデザイン
使用ツール
・STUDIO(デザイン・実装)・Illustrator/Canva(画像・ロゴ制作)
概要
WordPressを使用、ノーコードで制作の架空美容室サイト。お問い合わせフォームや「お客様の声」投稿機能など、サイト運営者がコーディングなしで簡単に情報更新できるよう設計しました。
制作のポイント
・ノーコード構築:プラグインやブロックエディタを活用、誰でも更新・管理ができる設計に
・明るく親しみやすいデザイン:お店の雰囲気が伝わるよう、明るい色合いや写真を活用したビジュアル設計
主な機能
・お問い合わせフォーム:ユーザーが簡単に問い合わせできるようフォームを設置
・お客様の声投稿機能:WordPress投稿機能を活用し、レビューを手軽に追加・管理可能に
・SNS連携:X、Facebook、Instagramの口コミ投稿を掲載し、店舗のリアルな魅力を伝達
・Google Map埋め込み:店舗の場所がひと目で分かるよう、アクセスページに地図を表示
使用技術/ツール
・WordPress(ノーコード設計)
概要
見本を参考にしながら、一番最初に制作したバナーです。Photoshopを使用し、レイヤー構造の理解や図形・文字の配置、色の調整など、基本的な操作方法を確認しながら進めました。
制作のポイント
・レイヤーの使い方を習得:オブジェクトの重なりや管理方法を学びながら制作
・文字・図形の基本操作を実践:テキストの配置や整列、図形のバランスを意識
・見やすさと構図を意識したデザイン:配色や余白、視線の流れに注意しながらレイアウト
使用ツール
・Adobe Photoshop
コメント