CREATOR BLOG

制作実績「株式会社サクラマチ」フェーズ1

my work 20210416
株式会社サクラマチ様のWebサイトのフェーズ1を公開しました。
URL : https://www.sakura-machi.co.jp/
CMS : WordPress
レスポンシブデザイン
常時SSL接続
デザイン〜HTML/CSS/JavaScriptコーディング〜Wordpressテーマ化まで一括で制作。

デザイン&コンセプト

PCトップページ
PCトップページ BigHero
SP向けトップ
SP向けトップ

会社名がマイジールからサクラマチに変更になるのに伴い、サイト自体の刷新のご依頼を受けて作成しました。

ドメイン名も変更となり、お急ぎで公開をしたいとのご要望でしたので、フェーズ1とフェーズ2の2段回に分けての公開というスケジュールにて進めております。

2021年1月1日には、すでに会社としてサクラマチとして動いていたので、フェーズ1としてトップページ1ページのみで、そこに会社のサイトとして最低限必要な内容を入れて公開という形にしました。

デザインコンセプトシートの一部抜粋。デザインを作る前にこういったシートを作成し方向性を決めていきます。そうすることで、デザインのぶれをなくし、統一感のあるサイトになります。

コンセプトは、イメージカラーとして、ピンク(#ffc4cd)を中心とし、商品の対象が対象は30代~の女性が中心となるため、大人可愛らしいイメージが希望とのことで、デザインを作成しました。

また、高級感を出すためにスクロールに合わせたアニメーション(パララックス効果など)やハンバーガーメニューの表示時にアニメーションなどリズムの工夫をしています。

WordPressカスタマイズ

トップページの各コンテンツブロックは、sectionタグ、artticleタグを出力するオリジナルのinnerBlocksを作成し対応。

管理画面のスクリーンショット。他のブロックを内包でき、sectionタグやarticleタグ、divタグを出力する汎用的ブロックで、どのようなコンテンツにも対応可能に。

WPのinnerBlocksは、他のブロックを内包できるのですが、管理画面上では、どこまでがinnerBlocksで、どこまでが内包されたブロックなのかわかりづらい点があります。そのためこちらで作成したカスタムブロック では、innerBlocksに薄いボーダーと右上にどのタグで囲ったのかの表示をするように作成しています。

また、news部分は、newsカスタム投稿タイプを追加し、トップページのnews表示はオリジナルのダイナミックブロックにて表示させています。

右のパネルで選択した投稿タイプの新着を3件表示することができる。

 

    ▲ PAGE TOP