クライアント：ランサーズ株式会社

公開サイト：Expert Writer’s Portfolio

 

流行りの非平行ヘッダ

セクションごとの区切りを単純な四角ではなく、少し形を変えて表現をしてみました。矢印的な区切りをもうけ、次の内容へと視線誘導をするのが狙いです。

 

 

画像で区切りを表現することもできますが、デバイスサイズごとに拡大／縮小されて色味が狙ったものにならない可能性があるので、すべてCSSとjQueryで実装しました。

 

実際、ちまたのサイトでも非平行ヘッダは流行っているようです。

[blogcard url=”https://ferret-plus.com/6472″]

 

ランサーズ様おすすめのライター紹介ページでしたので、プレミア感を出して欲しいというご要望がありました。そのため、流行りを積極的に取り入れる&フォントも游明朝などの質の高い書体を使い、綺麗で読みやすいものを意識いたしました。

 

 

レスポンシブデザインによるhtml一本化

Chromeのデベロッパーツールをフル活用してCSS調整を行いました。4kディスプレイからiPhone5sまであらゆるデバイスでまったくレイアウト崩れはありません。

 

いわゆるレスポンシブデザインというものですが、

 

 

PC表示時

 

 

スマホ表示時

 

スマホ表示もPC表示もひとつのhtmlファイルの記述だけですみますので、更新作業が格段に楽になります。特に今回はライター16人の情報を記載すると言う情報量が多いページでしたので、スマホサイト版とPCサイト版で情報の齟齬があるということがなく大変楽です。

 

スマホ版とPC版でhtmlが分かれていて、更新が大変と言う方は、ぜひ僕にご相談いただければと思います。