パティスリーサイト　テンプレート制作　その2

まだまだ暑い日が続きますが、いかがお過ごしでしょうか樹－createの渡邊です。仕事を合間を縫いながら進めております。パティスリーサイトのデザインテンプレートが概ね完成いたしました。
明日には公開しようと思いますが、制作にあたってのポイントなど説明しようと思います。

デザインはシンプルで白と黒を基調に

以前の記事でも記載しましたが、架空の「patisserie　C+」というお店をモチーフにテンプレートを制作いたしました。今回利用させていたWordpressのテーマは「ystandard」というテーマで、良い意味でくせがなく今回のシンプルデザインにもってこいのテーマだと思い選定しました。

デザインの基調は白黒と市松模様をベースにシンプルでいて、デザイン的にも汎用性の効くテイストに仕上げました。

トップページはパソコンはフルスクリーンの画像を使用して、画面いっぱいに広がるスイーツでインパクトを与えたり、市松モチーフの画像を入れたり、机にレイアウトしたスイーツの彩（いろどり）の美しさを感じてもらえたらと思いピックアップしました。

白の皿でより商品の色をより引き立たせる

各下層ページは、商品ページ（ケーキ、ゼリー、焼き菓子）は白の皿を使って、商品の持つ色の美しさを最大限生かすよう心掛けました。

各コンテンツの今回のテーマは「ずらし」と「半透明」です。パソコン、タブレット、スマホで見たときにそれぞれレイアウトが異なるので、少しcssの記述は増えましたが、テーマ内に「ysパーツ」という機能があり、そちらを活用することで複雑なレイアウトも割とスムースに作ることができました。

パソコンは横幅を活かし、スマホは縦幅を活かす画像

今回もう一つこだわった点は、各コンテンツ内の画像についてです。パソコンとスマホではそもそも縦横比が違うので同じ画像で作り込むのはそもそも限界があります。それでも多くのサイトは同一画像を使用しているケースが多いと思いますが。今回はそのあたりもこだわってみました。

又何かの機会があれば詳しく書こうと思いますが、HTMLタグに「pictureタグ」というものがあります。そのタグを利用することで、window幅に応じて読み込む画像を切り替えることができます。

昔はcssのdisplayというプロパティを利用してパソコンとスマホの表示、非表示を切り替えていましたが現在ではその手法ですと、両方の画像を読み込んでからcssで表示と非表示を切り替えているためサイトの表示速度の観点から非推奨となっています。

明日は販売サイト（EC機能）をどのように実装したのかについての記事を書こうと思います。