header
自分らしさを伝えたい──
自身のポートフォリオサイト

PACKAGE

ポートフォリオ制作
制作期間:21日
使用言語:HTML / CSS / jQuery

portfolio
CONCEPT| 自分らしさ

作業をするときは、必ず「コーヒー(カフェラテ)」と「本」を机に用意してからスタート
カフェと自分の作業場をイメージして制作
シンプルで操作性のいいサイトの実装



BEING PARTICULAR ABOUT| 伝えたいことが伝わるデザイン

1.導線をイメージして、webサイトを周回してもらえるようにボタンを配置
 見てほしい順番にページを見てもらえるよう、気になったページにすぐ移動できるよう
 ナビゲーションバーの固定、トップへ戻るボタンの配置の他にもこまかく配置
2.デザインだけではなく、ユーザーの使いやすさを意識
 画像はクリックするとモーダルウィンドウが出るように 3.レスポンシブデザイン
 最小320pxまで制作
 キレイに収まっているだけではなく、小さな画面の中からでも伝わるデザインを意識



CONCEPT| 自分らしさ

作業をするときは、必ず「コーヒー(カフェラテ)」と「本」を机に用意してからスタート
カフェと自分の作業場をイメージして制作
シンプルで操作性のいいサイトの実装

BEING PARTICULAR ABOUT| 伝えたいことが伝わるデザイン

1.導線をイメージして、webサイトを周回してもらえるようにボタンを配置
 見てほしい順番にページを見てもらえるよう、気になったページにすぐ移動できるよう
 ナビゲーションバーの固定、トップへ戻るボタンの配置の他にもこまかく配置
2.デザインだけではなく、ユーザーの使いやすさを意識
 画像はクリックするとモーダルウィンドウが出るように 3.レスポンシブデザイン
 最小320pxまで制作
 キレイに収まっているだけではなく、小さな画面の中からでも伝わるデザインを意識

MOCK UP

BEING PARTICULAR ABOUT| 細部までユーザーの視線を意識

1.1つの画面でコンテンツが収まるように制作
2.下にもコンテンツが続いていることに気付いてもらえるように画像の下に矢印を設置
3.@keyframesを使い矢印を動かした

portfolio
作品一覧