SHIMIZU KASUMI

「気軽に続けられる日記」と「見るのが楽しくなるデザイン」を軸に企画しました。
毎日負担なく使えるシンプルな操作性と、自分の気分が上がるような柔らかいデザインの両立を目指し、使用ツールや技術選定、UIデザインを決定しました。

「気軽に続けられる日記」というコンセプトを実現するため、日記データを配列として管理し、EJSを用いてテンプレート化する構成を採用しました。記述した内容をコンパイルすることで、静的なWebページとして表示される仕組みを構築しています。
テンプレートエンジンには複数の選択肢がありましたが、以下の理由からEJSを選定しました。

• ・静的サイトとして構築できるため、セキュリティ面の考慮が最小限で済む
• ・HTMLに近い記法で学習コストが低い
• ・利用実績が長く、情報が豊富
• ・jQueryとの相性が良く、フロント側の実装がしやすい

また、ページ表示にはコンパイル処理が必要なため、Gulpを導入し、ファイル保存時およびコミット時に自動コンパイルが実行される環境を構築しました。

デザインは、韓国のアイドルやファッション系バナーに見られる、レトロ感がありながら区切りのはっきりしたレイアウトを参考に設計しました。
ビジュアルリサーチにはPinterestを活用し、自身の好みだけでなくテイストの共通点を整理したうえで方向性を決定しました。

また、iOSウィジェットのようなスタイリッシュさも取り入れるため、使用する色数を絞り、アクセント用フォントと本文用フォントを使い分けました。
装飾性を持たせつつも甘くなりすぎないバランスを意識し、視認性とデザイン性の両立を図っています。

レイアウト構築にはCSS Gridを採用しました。複数行にまたがる構造をシンプルに実装することを目的としています。
Flexboxで同様のレイアウトを組む場合は要素の追加が必要となり、マークアップが複雑になりやすいため、Gridを使用することでHTML構造を簡潔に保ちました。

また、文字サイズやマージンの値は関数を用いて管理し、保守性と可読性を意識したコーディングを心がけました。