Works webdesign
back
Port folio site by Ayu Kamioka
ポートフォリオサイト
担当部分
デザイン、コーディング、イラストレーション
制作期間
1ヶ月半(デザイン3週間、コーディング3週間)
使用技術
Photoshop、Illustrator、CLIP STUDIO PAINT、HTML/CSS、jquery
コンセプト
自分の作るデザインを通して見る人すべてに想いを届けたいという気持ちから、『想いを届ける』という意味を 込めて、紙飛行機をモチーフにしたWebサイトを作成しました。 ユーザーに、自分を表現したこのポートフォリオサイトに興味を持ってもらい、尚且つサイト内の様々な情報が 入っていきやすい作りになるよう心がけました。 文字や画像が少ない部分には背景や装飾を追加する、多い部分はシンプルにまとめるなど、視覚から伝わってくる 情報にコントラストを作って工夫しました。
デザインコンセプト詳細
ポートフォリオサイトには自分の強みであるイラストを配置したかったため、メインビジュアルにもってきています。コンセプトの、デザインを通して想いを届けるという考えからデザインは身の回りの日常生活に数多く存在しているため日常の物を連想させるイラストを自分なりに描きました。黄色と紺色の2色を使用して、サイト全体のカラーと統一感を持たせています。
サイト全体のカラーは、ベースには制作物の妨げにならないよう無彩色を使用しています。メインには自身の好きな色やユーザーの目を引く色にしたかったため黄色を使用しました。それに合わせてコントラストの強い紺色を使用することでまとまりよくなるよう工夫しました。
ナビゲーションは左サイド固定にしてユーザーが迷わないよういつでもページ移動できるようにしています。
各コンテンツの順番は今の自身のスキルが伝わりやすい、ユーザーの知りたい重要性を考えた順番にコンテンツを配置するよう意識しました。
オリジナリティを出すために手書き感のある線を背景にして親しみやすい雰囲気が出るようにしました。
コンテンツの境界に緩やかなカーブをつけて、紙飛行機の軌道や紙の動きを表現しています。
各ソフトのアイコンはIllustratorで作成しました。一目で何のソフトかわかるように基本的なアイコンの形は崩さずに主にカラーでサイト全体と統一感が出せるようにしています。
コメント
私自身のポートフォリオサイトです。 サイトデザインとコーディング、メインビジュアルのイラストを作成しました。最近では動きのあるwebサイトが主流になってきていることもあり、jqueryなどの練習もかねて、このサイトを見るユーザーに興味をもってもらえるような動きのあるサイトづくりを目指しました。