【卒業制作】本リリース時点での実装内容まとめ①（UI編）
はじめに
現在通っているスクールの卒業制作として、技術記事を投稿できるアプリを作成しました。
本リリースが完了したため、自分のまとめ用に記事を投稿します。（PFのURLは後日Zennにも載せたいと思います。）
MVPリリース時点ではUIには拘らず、正しく挙動する機能を作成するという観点からアプリ開発を行っておりました。
自分の中でUIを調整するという点は苦手意識があったので、本リリースへ向けて色々な資料を確認しながら進めました。
初学者の記事内容となりますが、参考になりましたら幸いです。
フロントエンドのフレームワーク
今回のアプリ作成では時間の制約もあったので、主に下記2つのライブラリを使用しました。
基本的な箇所は下記フレームワークを使用し、必要に応じてCSSを直書きしました。
参考にした教材、資料
-
ノンデザイナーズ・デザインブック [第4版] ：デザインの４原則に関しても無知だったため、本リリースの前にこの本を読んでおいて良かったと心から思いました。
「近接、整列、反復、コントラスト」を意識するだけで、デザインが人に与える印象はこんなにも変わるんだと実感できた書籍です。
今後もこちらの書籍を頼りに、UI調整を行っていきたいと思います。 -
スクールのヘルプページ資料：ここへURLを載せることはできかねますが、こちらも大変勉強になりました。配色のルールを学んだのはここに載っていた資料からでした。カリキュラム外でこんなに充実した資料を載せてくださっていることに、改めて感謝した瞬間でした。
-
【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ：こちらは、スクールのヘルプページに載っていたスクールの先輩のサイトです。そもそもどういったCSSフレームワーク、どんなWEBアイコンのサイトがあるのか、という知識もなかったので体系的に学ぶことができ大変助かったサイトです。付随してつけていただいている参考サイトも一通り目を通しましたが、自分じゃ辿り着けなかったであろうサイトばかりで、大変勉強になりました。
-
【爆速UI設計術】モダンなwebデザイン素材集： Xをたまたま拝見していた時に見つけた記事になります。この記事を拝見し、O-DANというサイトを見つけました。
O-DANでは、世界中の無料写真素材の中から理想の一枚を探すことができるサイトで、私はこのサイトからbackground-imageを見つけました。 -
画像から色を取得するツール:こちらもスクールの方がLT会で紹介されていたツールになります。画像がどんな色を使っているのかを判定してくれるツールになっており、O-DANで複合的な配色のbackground-imageを使用していた私にとって、とても便利なルーツでした。
background-imageが数十種類使用された画像だったため、こちらのツールを使用しメインカラー、アクセントカラーをChatGPTに確認しました。その内容はこちらの記事にまとめております。 -
動くWebデザインアイディア帳：トップ画面の中でCSSで動きを付けたいと思い探したところ、こちらのサイトに出会いました。2024年8月下旬より有料化してしまうようですが、「こんな動きが欲しい」という願いを叶えてくれるサイトでした。hoverでは少し物足りなかった部分を、こちらのサイトで補えることができたので本当に感謝しております。
-
Google Chromeの拡張機能「Grid Lines Ruler」： デザインの４原則である「整列」を意識する上で、役に立ったツールです。これまで中央揃えを選択することが多かったので、左揃え・右揃えにして整えるのに役立ちました。具体的な使用方法は、こちらの記事にまとめております。
最後に
本リリースするまでに参考にさせていただいた教材、資料をまとめさせていただきました。
これまでの皆様の知見を参考にさせていただきながら、PFのUIを作成することができました。本当にありがとうございます。
今回の記事内容も、この記事を見てくださっている方の参考になれば幸いです。
拙い文章でしたが、最後までご覧いただきありがとうございました。
Discussion