【Webサイト】個人ブログ　GLOW

概要

1年生前期の集大成として、個人ブログの制作に取り組みました。

本制作では、企画・デザインからコーディング、そしてWordPressへの実装までをすべて一人で行いました。デザインから実装まで一貫して制作するのは今回が初めてであり、特にWordPressを用いたサイト構築も初挑戦でした。

制作期間は、デザインに約2ヶ月、コーディングに約1ヶ月、WordPressの実装に約2週間をかけ、全体でおよそ3ヶ月半をかけて完成させました。

作品紹介

1.テーマ決めと調査

私は普段、装飾が多く、さまざまな色を使用したデザインが好きなのですが、今回はあえて自分の好みとは異なるテイストに挑戦したいと考え、シンプルなデザインのブログを制作することに決めました。

PinterestやSANKOU!などの参考サイトを活用し、さまざまなWebサイトを調査しました。その中で、美容院のサイトは要素が整理されており、色数も抑えられていて、全体的にシンプルで見やすいものが多いと感じました。

2.コンセプト決め

私のブログでは、日常の中で感じたちょっとした嬉しかったことや楽しかったことを、小さな輝きとして記録していきたいという気持ちがありました。そこで、その思いを表す言葉として「GLOW」というタイトルを設定しました。

「GLOW」には“柔らかく光る”という意味があります。自分が思い描いていたブログのイメージと近い言葉であると感じたため、この言葉をタイトルおよびコンセプトとして制作を進めました。

3.設計

配色

ラフスケッチ

モックアップ制作

4.ポイント（デザインについて）

アイコン

「小さな輝き」というテーマから着想を得て、光のオン・オフを表す電源ボタンのモチーフと、「GLOW」の頭文字である「G」を組み合わせています。

写真の形

全体をシンプルなデザインにしているため、単調になりすぎないよう少し遊び心を加えました。aboutページの写真は右上と左下のみ角丸にし、ブログのアイキャッチ画像はあえて正方形にすることで、統一感を保ちながら変化をつけています。

アイキャッチ

アイキャッチ下の情報が多く見えすぎないよう、日付を縦配置にしました。情報を整理し、すっきりとした印象になるよう意識しています。

縦型のヘッダー

以前から魅力を感じていた縦型ヘッダーを取り入れ、サイトの個性を出しました。ただし、スマートフォンでは操作性を考慮し、横型に切り替えたうえでハンバーガーメニューに変更しています。

6.ポイント（コーディング・実装について）

Searchボタン

検索ボタンは、クリック時に画面の邪魔にならないよう、横から検索欄がスライドして表示される仕様にしました。また、表示・非表示を切り替えるだけでなく、透明度を徐々に変化させるフェードアニメーションを加え、自然な動きになるよう工夫しています。

検索キーワードに該当する記事を表示できる機能も実装しました。

コメント機能

WordPressの既存機能の仕組みを調べながら調整を行い、サイト全体のデザインに合わせてCSSでカスタマイズを行いました。

デフォルトの仕様では名前のほかに投稿時間が表示されていましたが、Homeページとの統一感を持たせるため、日付のみの表示に変更しています。

さらに、コメント送信後に正常に送信できたことが分かりやすいよう、メッセージが表示される仕様にしました。

メインビジュアル

メインビジュアルでは、テキストマスクの表現に挑戦しました。当初は文字が指定した横幅と高さに収まるよう、自分で調べながら調整を行いましたが、思うように整えることができず苦戦しました。

そこで先生に相談し、アドバイスをもとに1行ずつvh単位で設定する方法へ変更しました。1行ずつサイズを指定することで、画面サイズが変わった場合にも対応できる構成としています。

感想

初めて実際に使用できるWebサイトを制作することができ、大きな達成感を得ることができました。クラスでの評価では「シンプルで使いやすいデザインで良かった」「細部までこだわっていて良かった」といった言葉をいただき、高評価を得ることができました。

特に、自分がこだわって制作した部分を評価していただけたことが嬉しく、今後の制作へのモチベーション向上にもつながりました。