Blue Notes

概要

本作品は、企画から設計、デザイン、実装までを初めて一貫して行ったWebサイトです。
制作にあたりWordPressを初めて使用し、テーマ設定から情報設計まで自ら考えながら構築しました。
テーマを軸に、Webサイトを訪れたユーザーが迷わず閲覧できる導線や見やすさを意識し、試行錯誤を重ねながら制作しました。

制作目的

学校課題として制作した、日々の学習内容や自身の趣味を発信することを目的としたブログサイトです。
継続的な情報発信を通して、閲覧者にとって見やすく整理された構成を意識して制作しました。

デザイン・構成

本ブログサイトは海をテーマに制作しました。

閲覧者がどのページを見ても同じ世界観を感じられるよう、配色・背景・余白・モチーフの使い方を統一し、サイト全体に一貫性を持たせています。

視覚的な統一だけでなく、閲覧時に落ち着きや開放感を感じられるよう、シンプルなレイアウトと広めの余白を意識しました。

情報量が増えても圧迫感が出ないよう調整することで、長時間の閲覧でも疲れにくい構成を目指しています。

海には快晴の空がよく似合うというイメージから、太陽のモチーフを取り入れました。

太陽の内部には海の波を連想させる模様を配置し、「海」と「空」を一つのシンボルにまとめています。

円形のシルエットを採用することで、やわらかく親しみやすい印象を与えつつ、ブログ全体のアイコンとして認識しやすいロゴデザインに仕上げました。

色味も強すぎないトーンに調整することで、背景や写真と重なった際にも違和感が出ないよう配慮しています。

ファーストビューでは、ロゴと統一感を持たせるため、海の波を連想させるモチーフを画面いっぱいに配置しました。

訪れた瞬間にサイトのテーマが直感的に伝わるよう、視線の入り口となる上部に大きく配置しています。

さらに、ヘッダーの背景に透過表現を取り入れることで、水の透明感や軽やかな印象を演出し、圧迫感のないナビゲーションを意識しました。

これにより、デザイン性と操作性の両立を図っています。

about や footer のセクションにも海の波を連想させるモチーフを背景として配置しました。

ページをスクロールした際や別ページへ遷移した際にも、世界観が途切れないようにすることを目的としています。

主張しすぎない透明度や配置バランスに調整することで、情報の可読性を損なわず、自然に海のイメージを感じられるデザインにしました。

このように、サイト全体を通して視覚的な統一感と没入感を持たせることを意識しています。

ブログの一覧ページでは、記事の Article を 2列で並べて表示 するレイアウトにしました。

1画面に複数の記事が視認できるようにすることで、一覧性を高めつつ、ユーザーが興味のある記事を直感的に選びやすい構成を意識しています。

また、マウスを記事に合わせた際には、ホバー時にダークシャドウが表示されるよう設定し、カードが浮き上がるような視覚効果を加えました。

これにより、クリック可能であることを自然に伝え、操作性の向上と視線誘導の両立を図っています。

ページネーションについては、単なる数字の羅列ではなく、ブログ全体の柔らかい雰囲気に合わせて 丸みのあるデザイン を採用しました。

直線的なボタンではなく円形にすることで、可愛らしさと上品さを表現し、サイトの世界観と統一感を持たせています。

細部のUIにもテーマ性を反映させることで、全体のデザインバランスが崩れないよう意識しました。

シングルページでは、記事内容に集中してもらえるよう、全体的にシンプルな構成 にしています。装飾を最小限に抑えることで可読性を高め、ユーザーがストレスなく情報を追えるレイアウトを意識しました。

タイトル部分には、左側にラインを表示させるデザインを取り入れています。

これにより視線の起点を作り、ページを開いた瞬間に記事タイトルが自然と目に入るよう工夫しました。

記事下部には、前の記事・次の記事へ移動できるナビゲーションボタン を配置しています。

ユーザーが連続して記事を閲覧しやすくすることで、回遊性の向上を狙っています。

また、コメントエリアを設けることで、訪問者が気になった記事に対して気軽に意見や感想を送れるようにしました。

ボタンの配色やテキストエリアの border カラーもサイト全体の世界観に馴染む色味に調整し、UI要素が浮かないよう統一感を意識しています。

学んだこと

本制作を通して、Webサイトは見た目のデザインだけでなく、ユーザーの見やすさや操作のしやすさを考えた設計が重要である と学びました。配色やモチーフに一貫性を持たせることで、サイト全体の世界観を統一できることも実感しました。

また、WordPressを初めて使用したことで、記事投稿や更新のしやすさ、テーマ設計の重要性を理解することができました。デザインだけでなく、運用することを前提にした構成を考える視点 を持つことの大切さも学びました。

さらに、ホバーアニメーションやページネーション、コメント機能などのUI要素を実装する中で、細かな動きや余白、色の違いがユーザー体験に大きく影響することを知りました。

今後は、見た目の美しさだけでなく、「使いやすさ」と「継続的に更新できる仕組み」を意識したWeb制作を行っていきたいと考えています。

制作期間：3ヶ月

使用技術・ツール：

HTML / CSS / JavaScript / WordPress / Photoshop / Illustrator