DOU Web

概要

自分のポートフォリオサイト

制作の目的

出会った人々に自分の制作物やスキルを伝えるため。ブログを使って日々の思考を整理するため。

デザイン

「くせがない」「親しみやすい」「わかりやすい」の３つをコンセプトに決めて制作に取りかかりました。ベースは読みやすさを重視した白、メインカラーはロゴと統一して水色を使用。自分のサイトはスマホから見てくれる人が多いと想定して、スマホ版デザインを第一に考えました。ボタンやリンクの縦幅はなるべく44px以上にするなど、小さな画面からのアクセスのしやすさを考慮しています。「自分のサイトを一番見る人は自分である」と考え、各ページの余白の取りかたや角丸の大きさなど細部まで、自分が気持ち良いと感じられるデザインを追求しました。

コーディング

ファーストビューの海と空のイメージのままリード文を読んでもらいたくて、スクロールすると写真の上に文章が載るように実装しました。CSS記述の効率化のためにSassを使用、CSS設計の考え方としてFLOCSSを導入、以前はjQueryで記述していた要素の表示/非表示の切り替えやスクロール時の制御をVue.jsに置き換えるなど、技術的なスキルアップも目指しました。

担当範囲

デザイン / コーディング / ライティング / アイコン作成 / 写真撮影

レスポンシブ

スマートフォン / タブレット / PC

制作期間

2019年2月〜2019年11月(160時間)

使用ツール

Xd / Photoshop / Illustrator

使用CMS

WordPress

使用言語

HTML / CSS / Sass / JavaScript / Vue / PHP

URL

https://d-o-u.jp