fe.photos

UI Design, Coding(HTML / Vue.js / CSS)

About

グラフィック制作などに取り組む中で、自分の成果をまとめた「ポートフォリオ」が必要となる機会がありました。
ポートフォリオの制作には、Adobe PorftolioのようなWebサイトのジェネレーターから紙媒体によるものまで、多様な選択肢がありますが、今回は学んでいるJavaScriptの知識強化も兼ねて、Vue.jsによる制作を選択しました。
これまで、HTMLによるWebサイト制作を起点として、学習とともに自身のWebサイトも変革してきましたが、勉強の一部として、コーディングをメインに制作していたのが本音です。そこで今回は、ブランディングなどにも取り組むことで、「自分らしい」統一感を意識して制作に着手しました。

History

一代目と二代目に制作したサイトは、どちらもHTMLとCSSをメインに、モーダルウィンドウなど一部をJavaScriptにて実装しました。
両者とも、「写真を魅せたい」という意図のもとで制作を行っていましたが、どちらも自己のポートフォリオとして評価すると、ポートフォリオの意図には沿っておらず、完璧なWebサイトとは言えませんでした。
そのため、今回Vue.jsの習得と合わせて、ポートフォリオとしてのWebサイトを制作することになりました。

初期に制作したWebサイト

UI/UX

今回、スマートフォンとPC、さらにはタブレットなどどんな環境下でも使いやすいUIを目指してデザインを行いました。
これまでと同様に「Photography」を強調するために、トップページには写真を配置しましたが、特筆すべき特徴として、ヘッダーが写真の邪魔にならないよう、アクセス時にヘッダーの背景を透過し、ユーザーのスクロールに応じて背景が出現するようにプログラミングを行いました。初回アクセス時には背景を透過させることで、ヘッダーのユーザビリティも損なわないよう配慮しました。

スマートフォンとPCのマルチ対応

Concept

More simpleness, More Beautiful.

今回意識したのは「シンプルさ」。そして、かつ「美しい」こと。
シンプルだからと言って、見難かったり、ユーザビリティに欠けてしまっては本末転倒です。Webサイトは芸術品ではありません。ユーザーに見てもらうために制作を行います。
しかしながら、見た目も大事。そこで、シンプルながらも、Webサイトとして美しい(≒機能美)ことをコンセプトとして定め、制作に取り組みました。

Logo

本サイトのロゴマークは、そしてハンドルネームの二文字「Fe」をモチーフに制作しました。
まずは最初に、コンセプトを意識しながら、シンプルな図形を組み合わせたロゴのアイデアをたくさんアウトプットし、イメージを膨らませました。

ロゴマークの考案過程

その中で、案を1つに絞り込んだ上で、カラーリングなどの検討を行い、コンセプトを考慮した上でグラデーションを外し、丸を覆う図形は削除し、シンプルな円を基本としたモチーフに落ち着きました。
2本のラインは、Fの横線、そしてeの中央にあるラインの重なりをイメージし、円に切り込みとして取り込んでいます。それとともに、「太陽」と、そこにかかる「雲」を白と赤の二色で表現しています。

ロゴマークの考案過程(2)

Others

制作後、デザイナーの方にポートフォリオを見ていただく機会がありましたが、共通してアドバイスいただいたのが「どんな思いを込めて、どんな工夫をしたか」を込めてほしいというアドバイスでした。
UIなどは概ね好感的だったものの、作品をただ表示するだけでなく、あなたの意図なども含めてポートフォリオに載せてみては、という意見をたくさんいただきました。
しかしながら、今回制作したポートフォリオはJson形式で作品の管理を行っており、そのような実装は面倒を極め、気が進みませんでした。そこで、今後の利便性も考え、ブログ形式でポストできる、この「withU」構想がスタートしたのです。

Detail

制作年:2019
担当:デザイン(UI,Logo) | フロントエンド開発(HTML, CSS, JavaScript, Vue.js)
クライアント:自主制作
スキル:Adobe XD, Adobe Illustrator, Adobe Photoshop, VSCode, HTML, CSS, JavaSript, Vue.js, Netlify, and etc.

(C) 2020- Sora Harada. All rights reserved.