DOU Web

概要
自分のポートフォリオサイト
制作の目的
出会った人々に自分の制作物やスキルを伝えるため。ブログを使って日々の思考を整理するため。
デザイン
「くせがない」「親しみやすい」「わかりやすい」の3つをコンセプトに決めて制作に取りかかりました。ベースは読みやすさを重視した白、メインカラーはロゴと統一して水色を使用。自分のサイトはスマホから見てくれる人が多いと想定して、スマホ版デザインを第一に考えました。ボタンやリンクの縦幅はなるべく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