AZUMI NAGANO　portfolio site

01.基本情報

製作期間：6日
担当範囲：すべて
使用ソフト・技術：
HTML / CSS / jQuery / Illustrator / Photoshop / After Effects / Procreate / Visual Studio Code
URL：https://zumiino.org/portfolio/

01.コンセプト

自身のポートフォリオサイトを初めて制作しました。
一からデザイン、コーディングまでを行いました。

クリームソーダをテーマに、可愛らしさと遊びごころもありつつ、見やすさも意識しながら制作しました。

私自身クリームソーダが大好きで、飲むと幸せな気持ちになり、心が満たされます。

「私の作るデザインで、誰かの心が心地よく満たされ、それぞれのしあわせに繋がりますように。そんな、相手の心に届くものを生みだせるデザイナーになりたい。」

という想いを込めて、クリームソーダをテーマにしたポートフォリオサイトを制作しました。

03. 制作過程

03-1. コンセプト設定

まず初めに、コンセプトを決定するため、アイデアを考えました。
ポートフォリオは自分の説明書のようなものなので、自分らしさ、自分の色を出したいと考え、自分がどのような人柄か、好きなものはなにか、どのようなデザイナーになっていきたいかなどを考えました。

・飲むと心が満たされしあわせな気持ちになるのでクリームソーダが好き。
・柔らかい、穏やかな印象を持たれることが多い。
・イラストを描くことが好き。
・自分の作るデザインで、誰かの心が心地よく満たされて、それぞれのしあわせに繋がるような、相手の心に届くものを生み出せるデザイナーになりたい。

これらの特徴を考慮し、全体にクリームソーダのデザインを施し、イラストも用いて、優しく温かい印象のWebサイトを制作することにしました。

03-2. ワイヤーフレーム作成

まず初めに、大まかなワイヤーフレームを作成しました。

●Home
・about（自身の紹介文を少しとaboutページへのリンク）
・works（制作した作品のサムネイルとworksページへのリンク）
・contact（contactページへのリンク）

●works
・works
　　allカテゴリー（すべての作品）
　　webカテゴリー（Webサイト）
　　printカテゴリー（印刷物）
　　logoカテゴリー（ロゴ）
　　otherカテゴリー（上記に当てはまらないもの）
・contact（contactページへのリンク）

●About
・プロフィールやポートフォリオサイトのコンセプト、スキルや自身の想いなど
・contact（contactページへのリンク）

●Blog（自身のブログへのリンク）

●Contact（お問い合わせフォーム）

上記の構成で制作しました。

03-3. 使用する色・フォントを決める

Webサイトの構成とデザインが決まったら、使用する色を決定しました。
クリームソーダから色を取り、全体的に緑を多く使っています。
アクセントカラーは、彩度の高い緑とオレンジに決定しました。

フォントは、丸みを帯びていて可愛らしさもあり、読みやすい、Google FontsのM PLUS Rounded 1cを使用しています。

03-4.  ロゴマーク作成

次に、このポートフォリオサイトのロゴマークを作成しました。

私の名前の " AZUMI "のアルファベットと、クリームソーダをかけ合わせて、ロゴマーク案を考えました。
考えた案の中から、一番Webサイトの雰囲気に合っていると感じた、Copperplateというフォントを使用したロゴマークに決定しました。

03-5.  イラスト作成

次に、使用するイラストをProcreateとIllustratorを使用して作成しました。

リアルなクリームソーダのイラストが一番描いていて楽しかったです。

03-6. デザイン作成

XDでトップページのデザインを制作しました。
余白なども細かく設定するなどし、後でコーディングしやすいように丁寧に作りました。

03-7. ローディング画面用のAPNGを作成

次に、ローディング画面用のAPNGをAfter Effectsで作成しました。
Webサイトを訪れた方に、初めにローディング画面でクリームソーダを印象づけることで、この後で表示されるWebサイトのテーマがクリームソーダだということに自然に気がついて頂けるようにしました。

After Effectsを使用するのは初めてでしたが、色々と試行錯誤しながらなんとか理想通りのものを完成させることができました。

03-8. コーディング

デザインと素材作りが完了したら、コーディングに取り掛かりました。

ポートフォリオサイトなので、デザイン性はありつつも、見やすさ・読みやすさの質は落とさないように意識しました。

こつこつと少しずつ理想のものが出来上がっていくことがとても楽しかったです。

04. 工夫した点

Webページ全体の背景は、大きなクリームソーダをイメージしています。
ソーダを波打たせたり、炭酸を表現したり、底にいくにつれて深い色にグラデーションさせたりなど、少しでもクリームソーダに近づける為に工夫しました。

トップページの制作実績の作品のサムネイルは、クリームソーダに沈む氷をイメージし、正方形にして並べています。
また、画像全体の角を丸くし、柔らかい印象になるようにしました。

contactページへ飛ぶ「お問い合わせはこちらから」ボタンは、純喫茶の看板をイメージしています。
初めは暗いですが、hoverすると明かりが灯るようにしました。

worksページでは、作品が増えたときに、見たい作品を探しやすくなるように、カテゴリー別に作品を絞り込んで表示できるようにしました。

手書きの字やイラストを使用することで、絵を描くことが好きなことと、心が満たされるような温もりのある雰囲気の両方を伝えられるようにしました。

05. 完成作品

作品URL：https://zumiino.org/portfolio/

05. まとめ

自分らしさと見やすさを意識して制作できて良かったです。
最初から最後まで楽しんで制作することができました。

今まで動く画像はGIFしか知らなかったのですが、今回始めてAPNGを知り、もっとAfter Effectsもうまく使えるようになりたいと思いました。