ディレクション

デザイン

コーディング

WEBサイト

ポートフォリオ

このサイトです
ポートフォリオサイトイメージ
Scroll

作品詳細

プロフィールサイトと名刺からデザインを一部拝借しました。


作品一覧をTOPページに配置し、サイトを見る方が目的を探す手間を省きました。今回は”見やすさ”と”わかりやすさ”を重点的に考えています。


①塩の結晶を降らせたことによりチラついて読みにくくなりそうな文字などは白地に載せて読みやすく。

②Webサイト作品の詳細ページはレスポンシブ対応であることがひと目見てわかるよう一番上にPCとスマホを配置。

③スキルをアイコンやレベルゲージで示し視覚情報によって熟読せずとも感覚的に情報が伝わるようにも努めました。

④スマホ版はどうしても縦長の記事になるので、オーバーフロー分を開閉式にし、スクロール数を減らしました。

top画面PC top画面SP
top画面PC top画面SP
music画面PC music画面SP
access画面PC access画面SP

レスポンシブの調整が苦手でバランスの悪さを感じる画面幅があるのがずっと気になっていたので、今回はバランスが悪くならないように気をつけて設定しました。まだ文字の場所や大きさ、などイマイチ美しくないなと感じています。プロの方のデザインの模写をたくさんこなしたらいろんなことに気づけそうなので、今後もっと勉強するようにします。


前回、拡大モードだと解像度が変わることを学んだので、320pxまで崩れずに見ることが出来るようにしました。