1日1WEBサイト デザイン分析 #26 "UNDERLINE"

こんにちは。Webデザイナー目指して勉強中のかいもちです。🐣
今日は、Web制作業界で知らぬひとはいない... ? フリーランスで活躍されている、徳田優一さんのページを見させていただきます。

"UNDERLINE"

目的・ターゲット

目的
・サービス紹介 → 販促
　その他、ポートフォリオ / ブログとして。

ターゲット
・Web制作を依頼したいと思っている個人、企業団体。
・老若男女、テイスト問わず。

配色

・やわらかい雰囲気をまとったモノトーン。シンプル。
　ポートフォリオやブログのキャッチ画像が映える配色。

 

フォント

・Helvetica (ほぼコレ)
　帝王ヘルベチカ(勝手に...w) とはいえ欧文フォントなので、ほぼ游ゴシック。

・Lato (見出し等、欧文)
　weightは100と400を使用。細めのセクションタイトルが上品。小さめの見出しやラベルは400を使っていて見やすい。

ファーストビュー

・シンプルで実直、堅実そうな印象を受ける。

・なかなかトップビューに自分の写真を使っているポートフォリオは少ないが、顔が見える = 安心感につながる。信頼できそう、と思わせる。

・アニメーションは無し。ヘッダーナビはマウスホバーで下線が付くが、SNSアイコンとロゴはホバー変化なし。

< 余白等 >
ロゴ上 : 13.7%
ヘッダー左右 :  18.7%ずつ
イメージの割合 : height: 54%

コンテンツ

Service

・非常にシンプルで、できることがわかりやすく伝わってくる。
　イラストが効果的。
・アニメーションは全く無し。

< 余白 >
・左右マージン : 約18%
・トップビューとServiceの間 : 100px
・セクションタイトルとコンテンツの間 :  約80px
・各コンテンツ間の余白 : 44px

Works

・ただただ整然と、実績が並んでいる。白背景に同化しないよう、薄いグレーの枠がそれぞれについている。
　クリックで詳細ページに飛べるが、ホバーのマニメーションが全くないので一見気が付かない。

< 余白等 >
・左右マージン : 上に同じ
・ServiceとWorksの間 : 約160px
・コンテンツ余白 : 左右40px , 上下60px
・コンテンツの大きさ : 278(w) * 259(h)

ブログ / フッター

・写真がとっても綺麗。徳田さんが、写真も得意とそれていることがわかる。
・ more はホバーで下線が出て、クリックできることが伝わるが、写真をクリックしても記事に飛べるようになっている。
・よーくみると、Worksとは写真の大きさが違う。

・下部矢印クリックでトップに飛べる。
・フッターはヘッダーと同じ内容。

< 余白等 >
・左右マージン : 上に同じ
・WorksとBlogの間 : 約220px
・セクションタイトルとコンテンツの間 : 約70px
・写真間余白 : 40px
・写真と文章の間 : 約40px
・写真 : 280(w) * 260(h)

感想

・デザインとは... ということを、深く考えさせられたページ。

・Webデザイナーのポートフォリオって、なんか、すごいページ(語彙力)じゃないといけない気がしていたが、それって本当にWebデザイナーとして求められる姿勢なのか ? と、問いかけられているような気がした。

・余白のとり方、フォント、weightの選び方、写真の配置まで、細やかな配慮と徹底されたユーザー目線を感じた。