新型コロナウイルスに関する弊社の取り組みについて詳しくはこちら

ピンタレストを意識したグリッド風デザインでスマートフォン対応リニューアル

美容専門学校のウェブサイトをリニューアルしました。

きっかけとしては若い学生がターゲットなのに簡易的なスマートフォンしかできていないという点がありましたが、ヒアリングをさせて頂き、サイト分析を行う上で他の課題も見えてきたためそれらを解消し、より学校の魅力を伝えられるウェブサイトになるようピンタレストを意識したグリッド風デザインにしました。

目次

リニューアル前の主な課題

・ブログやお知らせを外部機能(FC2ブログ等)で行っており独自ドメインのサイト内では行っていない。
・簡易的なスマートフォンページなのでパソコンから見た場合とスマートフォンから見た場合で内容の相違が出てくる。
・ナビゲーションが固定されておらず下層ページに入ると元のページに戻れなくなったりする。

制作コンセプト

・CMSを導入することにより全体を管理更新しやすくし、リンク切れなどのミスをなくす。ユーザーからは分かりやすいサイト設計。
・主要なページ(お知らせ、ブログ)には更新システムを導入し、お客様側でも簡単に更新できるようにし、利便性を高めると共にページ、キーワードを増やすことにより訪問数の増加を狙う。
・リスティング広告等他のプロモーションと連動したサイト作り。
・レスポンシブデザインでのスマートフォン対応
・アクセスログ機能にも対応し施策の効果検証改善

初稿デザイン

まずはイメージや参考サイトをお伺いし、初稿デザインを提出します。
ピンタレストを意識したグリッドデザインです。

修正指示例

初稿デザイン段階では方向性の確認なので納品までにデザイン変更することもありますが、下記のような意見を頂けるとスムーズに進行できます。
「もっとこの参考サイトのここを近づけてほしい」
「全体的にもっと赤を使ってほしい」
「ナビバナーをオレンジにしてほしい」
「文字を全体的に大きくしてほしい」
「この情報をフッターにいれてほしい」
「このコンテンツを増やしてほしい」

修正デザイン

トップページの印象が弱いということで別パターンも制作しました。
メニュー構成等も変更しています。

下層デザイン

採用デザイン(完成イメージ)

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次