2024.2.29
コーディングの学習と、Webデザインの学習を進めているBaku64です。現在、「デイトラ」という、オンラインでWeb制作やデザインなどのスキルが学べる講座の [Webデザインコース] を受講しています。
こちらのコースには初級・中級・上級という大きなパートごとに、いわゆる「お題」が与えられ、それにそって自分がデザインした作品を、プロのメンターが直接チェックしてくれて、レビューを受けられるというシステムがあります。メンターのレスポンスもとても早く丁寧、気持ちが良いです。
で、この「初級」のコースのお題に「化粧品のオーダーメードサービスのLPをデザインする」というものがありまして、デザインを提出し、レビューをいただいたのですが、せっかくコーディングも学んでいることですし、このデザインを実際にコーディングしてみようと思いました。
ハイ、自給自足です。
デザインを考える段階で、一応「コーディングするとしたらコードはどうなるかな」と考えながらデザインをしたつもりですが、蓋を開けてみると、いろいろな「やらかし」があり、コーディングするには骨が折れた部分が結構ありました。
ここでは、デザインを考えるときに、こうしたらコーダーさんにも優しいデザインになるぞ、という気づきについて、記録をしておこうと思います。「こんなこと常識だよ」という点も多々あると思いますが、笑ってスルーしてくださいね。
サイトのデザインについて
今回のサイトデザインは「デイトラ」のWebデザインコース初級の「LPをデザインしよう」の課題として取り組んだものです。
クライアントは「ToU」という、オーダーメードでスキンケア製品を自宅に送ってくれるサービス。30代のスキンケア商品を探している女性がターゲット。自宅でカウンセリングを受けることによって、自分の肌にぴったりな商品がセレクトされるというシステムです。色の指定は「紫を使用してほしい」との希望でした。
この要件をふまえ、デザインしたものを提出し、メンターさんのレビューを受けた事項を反映したものが以下になります。
SPサイト→ https://rinomano.com/wp-content/uploads/2024/02/sp-scaled.jpg
PCサイト→ https://rinomano.com/wp-content/uploads/2024/02/pc-scaled.jpg
そして、完成した(コーディングした)サイトはこちらです。
コーディングしづらい数々の「やらかし」
さっそく、総括的に「やっちまった」ことを羅列していきます
- ボタンに装飾をつけたがゆえに、画像で処理することになった
- 要素の配置がPC用デザインとSP用デザインで違う
- 使っている写真がSPとPCで微妙に画角が違い、一枚の画像ファイルのトリミングで処理できない
- ヘッダーとファーストビューの重なり方がSPとPCで違う
- あしらいがPCとSPで結構違う
- 文言がPCとSPで違う
では順に見ていきます。
CTAボタンにその装飾は必要だった?
LPで一番肝心なのは、いかにCTAボタンを押してもらえるかだと思っています。そして、私がいつも悩むのが、あざとくないデザインと「押してくれよ!」のアピールをどのように両立させたらよいか。今回は、「ここをクリックするんだよ」感を出したいと思って、CTAボタンの右端に矢印画像を重ねてみました。で、その結果、コーディング時にはボタンを「画像」として処理することになってしまいました。
画像のボタンが悪いとは思いませんが、せっかくだからなるべくコードで実装したかった・・・いや、今から思えば疑似要素を使って何とかなったのかもしれませんね。とにかく、「その矢印でクリックするんだぞ感は本当にアップしているのか?」という疑念もあいまって、デザイン的に要らない装飾だったかな・・と思います。
そして、このボタン画像の書き出し時にも注意が必要なのだと思い知りました。図を参照ください。ボタンの画像部分ギリで枠をかこって背景透過のPNGとして書き出した場合、画像の中心がWeb上で中心に表示したい場所よりも右にずれてしまうことになります。そうなると、スマホレイアウトでボタン画像をセンター揃えにしたときに、中心がずれてしまうことに・・・。
画像書き出しの段階で、「見せたい中心」を中心に合わせて(今回の場合は左側の余白をきちんととって)書き出さなければならなかったのでした。
ちなみにこのボタン、HTMLでは<button></button>で囲みました。そうするとCSSでブラウザデフォルトのスタイルを取り消すまでは、画像の外側にグレーの背景と枠線がかかってしまいますので注意です。
要素の配置の違い ~FVからリード文~
上記の画像でわかるように、PCとSPで、構成が大分違います。
PCレイアウト
PC-1,FVの写真(fv1)に半透明のヘッダー部分がかさなる。ヘッダーにはCTAボタン(エリアに合わせてサイズが独自なもの)が配置されている
PC-2,Just For you,Direct to Youと日本語のキャッチフレーズが女性の顔の右側に
PC-3,さらにその右に商品ラインナップ写真(products)
PC-4,ラベンダー色のざぶとんが写真の下に一部重なり、そこに「ご自宅でオンラインによる診断を受けるだけ」で始まるリード文
PC-5,その下にABOUT的なサービス説明(世の中にあふれているスキンケア化粧品・・)。右側に髪をなびかせた女性の写真(female)
PC-6,CTAボタン「診断お申込みはこちら」
SPレイアウト
以下の要素が縦に配置されています。
SP-1,FVにかぶさらないヘッダー(ハンバーガーメニュー付き)
SP-2,PCよりも縦に長い画角のFVにキャッチフレーズが若干かぶさる。キャッチフレーズと写真が重なる場所に半透明のざぶとんがついている
SP-3,PCでは「PC-6」の位置にある、CTAボタン
SP-4, PC-3と同じ商品写真
SP-5, ラベンダー色の背景にPC-4のリード文
SP-6, PC-5の写真(ただしイラストが重なっていない)があってから、サービス説明文
SP-7, PC-5の写真に重なっている植物のイラストのサイズを小さくしたもの
いやー、我ながら大胆に配置を変えたものだ(汗)
特にCTAボタン。 SPでは上から3番目の(FV~リード文のまとまりの)位置にあるのに対して、PCではPC-5の横並び要素のさらに下の位置にあり、ABOUT的なまとまりに所属している、という「属するエリアが異なる」というのが、とても扱いづらかったです。
結局、PC-6のCTAボタンとSP-3のボタンは、HTMLではそれぞれに位置に記述し、CSSで片方をdisplay:noneすることにしてしまいました。
SPレイアウト上、スクロール無しで見れる場所にCTAボタンを置くこと自体は有効だと思いますので、これをふまえてPCレイアウトでもFVの近くにCTAボタンを配置すればよかったのかなと。もしくはPCヘッダーにCTAボタンがあるのだから、PCのFV近くに無理してもうひとつボタンを置かなくてもよかったのかもしれません。
SP用とPC用、画像の出し分け
今回のFVからリード文のエリアですが、写真もレイアウトごとに違う素材になりました。写真を選ぶ際その縦幅横幅、トリミングをきちんと精査していたか、と言われると実はそうでもなく、
「顔アップにしたいよなあ、じゃ、このトリミング」
「スマホの時は100vhにして納まりをよくしたいなあ、じゃ、このトリミング」みたいに
ざっくり決めてしまったので、こういうことになりました。
こちらは、pictureタグをつかって、ウインドウ幅で素材の出し分けをしました。今回みたいに見た目がガラっと変わるのでなければ、写真だって1枚に済ますことができれば、そのほうが良いよなと思いました。
Pictureタグを使用したウインドウ幅による素材の出し分け、は以下を参考にしました。
画像の読み込み量を少なくすることができるので、サイトの表示速度に悪影響を与えることもなく、display:noneを使用するよりも良いそうです。
ちなみに、ウインドウ幅の指定はmax-width、min-widthの混在は避けた方がよいとのこと。私は混在させて<max-width:799px><min-width:800px>と書いてたら、検証ツールで切り替え点の「799px」にしたときに、画像が表示されなくなったことがありました。それ以来は、<src>属性に小さい幅の画像を指定し、<min-width>でブレイクポイント以上の画面幅での画像を指定することにしました。
あしらいの違い、文言の違い、は結局display:noneで処理
草花のイラストのあしらいがPCレイアウトとSPレイアウトで異なるところがサイトの後半部分で出てきます。特に違うのが「特別価格」らへん。
あしらい自体がPCとSPとで違うこと自体は、悪いことではないと思いますが、さすがに文言はそろえた方がよかったかな…と思います。二つ作って「display:none」で処理するのも、なんかカッコ悪い(?)っていうか、もっとスマートな方法はないものかな~ 今のところこれは!という解決法は浮かびません。
閲覧ウインドウ幅がカンプと違う時に、どういうデザインとするか
書籍などを見ても頻出のテーマです。カンプは幅1440pxの時と390pxの時(今回の場合ね)の見た目しか提供されていない。対して、デスクトップブラウザは幅が可変ですし、タブレットという「あらまあ中途半端!」な端末も存在する。その時にどのようにおさまりをよく、レイアウトが壊滅しないように組んでいくか。この問題を解決するにあたり、「ブロークングリッド」は非常に難しいデザインだということを思い知りました。(でも、個人的にブロークングリッドのデザイン、好きなんだよなあ)
今回は上記のように組んでみました。
カンプにある1440pxと390pxの時にはピクセルパーフェクトでコーディングするのは前提として、Chrome検証ツールの「レスポンシブ」で画面幅を伸ばしたり縮めたりして、文字の大きさや改行位置をCSSで手直ししていきます。
今回はdisplay:gridで作ったので、
・各要素の幅のパーセンテージやらvwやらをあーでもない、こーでもないといじり倒す
・フォントサイズもmin(〇vw、△px)などを使ってみてうまく行くか試す
などしましたが、
結局FVのキャッチフレーズ(Just For You・・)が1180pxあたりでFVの顔写真にかぶってしまう問題が解決できなかっため、1180pxでブレイクポイントを追加して、キャッチフレーズの位置を顔にかぶらない位置にずらすスタイルを設定しました。
そして、PCレイアウトでのヘッダーメニューがそろそろキツキツになってしまう780pxにブレイクポイントを設定し、ここを境にSPレイアウトとなるように決めました。
個人的には、タブレットではどちらかというとPCレイアウトで閲覧したい派(タブレットの大きさにスマホレイアウトの縦並びが、バン!と来ると「お、おう・・・」という感じになってしまうのです)なのですが、結構このあたりでSPレイアウトになっているサイトが多い印象がありますね。ヘッダーメニューのキツキツ問題がこのあたり関係しているのでしょうか。
さらに、デスクトップでの閲覧時、カンプ以上の幅になったらどの要素を幅広くしていくか、ということも悩みポイントです。私の愛読コーディング本「HTML4+CSS コーディングの強化書」にも、カンプ通りの比率で幅を広げていく設計と、FV以外のコンテンツの始まり位置とFVの要素の一部の横位置を揃える設計との2つが掲載されていて、それぞれのコーディング方法について解説がなされています。
今回はその解説も参考にしながら、どっちつかずのデザインで設定しました。
まずFV以外のコンテンツ幅はmax-widthを設定して、ある程度以上広がらないようにします。そして、紫の背景のみ、どんなにウインドウ幅が広くなっても端まで伸ばし、あとの要素は、FV以外よりは広めのインナー幅で抑える実装です。紫の背景を端まで伸ばすためにmargin-right:calc(50%-50vw) を使用しています。
このようなデザインにした理由は、色背景が閲覧幅いっぱいになっていないと「切り取って貼り付けた感」があって違和感があるということと、だからと言って他の要素(写真など)をあまりにも大きくすると女性の顔もビッグになってしまってビックリしちゃうし、広幅に伸ばしてしまうと真ん中がスカスカになってしまうからです。
ことほどさように、デザインカンプだけでは読み取れない、考えなければならないレイアウトへの対応がコーディング時には必要となるのですよね、そして全てのウインドウ幅でかっちょいいデザインレイアウトを実現するのはなかなか難しい。なので、デザイナーさんとのすりあわせが大切というのは腑に落ちる話です。逆に「ブレイクポイントは〇pxにしてください」と規定されてしまったら、結構コーダーとしたら悩むかもな、と思いました。その場合はブレイクポイント周辺でのデザインを提示するとよいのかな・・とも思いました。
コーダーとしては、せっかくデザインカンプをもらったときに全体を眺めて作戦立てて考えていても、上記のような対応作業の時には検証ツールを用いてのカットアンドトライ→そのたびうまくレイアウトされるよう、逐次、逐次でコードをあてていく、ということになんかモヤモヤしてしまいます。今回のコーディングでも、ブレイクポイントを増やしたり「あ、やっぱこの要素をもうちょっとこっちに動かすレイアウトにしよう」とこの時点で新たに考えて対応することが多く、最初の作戦でそれなりにきれいに組んだコードを解きなおしたりして結局「なんか汚いコード・・」になってしまいました。もっとスマートに、先見性をもった設計図が最初から書けるようになりたいなー、と思います。
まとめ
というわけで、「結局何がいいたいんじゃい」とセルフ突っ込みしたくなるような記事になってしまいましたが、自給自足コーディングの覚え書きでした。ここまでお読みくださってありがとうございます。
デザインとしてのわかりやすさと美しさを追求しつつも、コーディングを見据えて「その要素のその位置は意味のあることなのか?」を念頭に置いてデザインしていけたらなと思いましたし、コーダーとしては、上がってきたデザインをリスペクトして、カンプに表現されていない部分の世界観を想像し、表現できるコーディングが出来るようになりたいと思いました。
コメント