【WORKS】「かさい まちあそび2015・春」加西市播磨国風土記1300年祭実行委員会 様|第2話

2015/04/18   カテゴリー:Sixについて

みなさん、こんにちは。
神戸のWebブランディング事務所「Six」(シックス)です。
「ブランディング&コミュニケーション」で、経営戦略として資産価値を高めるための
Webサイト制作(ホームページ作成)・Webデザインを企画から運用までトータルにプロデュースいたします。

《神戸、明石、芦屋、西宮、尼崎、加古川、姫路、加西、西脇、兵庫県各地、京阪神各地、お気軽にご相談下さい!!》

「Six」は、打合せ後、よくご飯に行きます。
明石のピザ屋さんの前に行こうと企んでいたお店です。
なぜなら、お店の名前をご覧いただくとお分かりですね!(笑)
Bar & Bistro 64
64
そうです。「6」(シックス)「4」年目ということを狙って、企んでました!!
ちなみに喫煙出来るところもポイント高いのです!

加西市役所の情報政策担当のかたから「連日の雨で、桜は散ってしまいましたが、このサイトだけは、まだ桜が舞っていて、気持ちが和らぎます。」と、とっても嬉しいメッセージいただきました〜。
ということで、前回に引き続き、「かさい まちあそび2015・春」のWebサイトのデザインの深い部分についてご紹介します。

「かさい まちあそび2015・春」の情報設計の大きなバージョンアップ。

かさい まちあそび2015・春」について、「2014」からの大きな違いのバージョンアップのひとつに情報設計があります。
「2014」で実現出来なかった点を洗い出しました。加西市役所の情報政策担当のかたと、加西市播磨国風土記1300年祭実行委員会の担当のかた、また私たちの提案も合わせた結果、1番こだわったのが、各プログラムの見せかたの部分です。

「2014」は、諸事情等もあり、プログラム一覧とプログラム詳細を4つのページで展開していました。
「2015」では、各プログラムごとにページを制作させていただきました。

情報設計としては、まず、各カテゴリーのプログラム一覧ページから、プログラム詳細ページとしました。

図式で表現すると下記の感じになります。

sekkei

プログラム詳細ページだけでも40ページになるので、とっても大変なことなんですよ!(笑)
ちなみに恐ろしいスケジュールで制作いたしました。
各プログラムページは、いろんな取引先と私たちの超連携プレーを発揮いたしました。ガイドブックのテキスト入手や写真を含め関係者各位どうもありがとうございました!!おかげさまで、コーディング前に画像加工、リライトを事前に行なうことが出来ました。

Webサイト(ホームページ)訪問者には、とてもわかりやすいページとなっています。
「2014」は、ロングページで下のほうに掲載のプログラムだとかなりのスクロールが必要だったりもしたので、少し使いづらい感じがありました。クリックで各プログラムに直接飛ばない場合のスクロール比率を解消いたしました。

★ Webサイト訪問者がわかりやすいページづくりを心がけています。

プログラムを見やすく、わかりやすく伝える情報設計について。

プログラム一覧ページは、ガイドブックには存在せず、もちろんWebサイト(ホームページ)のみのオリジナル制作のページです。
写真とタイトル、プログラムの簡単な説明を掲載しています。
プログラム写真は、ガイドブックと同じ写真を活用していますので、ガイドブックとの整合性をはかっております。

food01

各プログラムの簡単な説明は、ガイドブックからリライトさせていただきました。

プログラム詳細ページは、情報として見やすさとわかりやすさ、さらにプログラムの魅力をガイドブック以上に伝えることを考慮して、写真を2枚としました。写真掲載が2枚となっているのも「2014」からのバージョンアップとなっています。

food02

写真提出については、主催者側の負担が高いようでしたが、プログラムを魅力的に伝える素材として、とても大切で重要な部分となります。私たちも提出していただいた中から厳選していますし、見栄えよくなるよう画像加工もさせていただいています。正直、中には加工しても限界な写真もありました。。。
(※次回提出される際は、プログラム内容が具体的にイメージしやすい魅力的で素敵な写真をお願いします!)

プログラムによっては、注意書きが増えたり、ガイドブックには表示しきれなかったWebサイト(ホームページ)へのリンクなど、内容をきちんと精査して、細かな部分にも個別に対応させていただいております。
1番わかりやすいのは、【27】の予約・問合せ欄です。サイト上には、ガイドブックのPDFもありますので、見比べてくださいね。

各プログラムの詳しい内容も枠内に適度なスペースがあって表示することで、より見やすくなっております。
GoogleMAPも、「2014」より、サイズを大きく表示出来て、よりわかりやすくなりました。

「2014」と掲載内容は同じようですが、継続して担当させていただいたからこそ、PDCAをまわしてチェックとアクションが可能になった部分です。

◆ 「PDCA」とは

Plan(計画):従来の実績や将来の予測などをもとにして業務計画を作成する
Do(実施・実行):計画に沿って業務を行う
Check(点検・評価):業務の実施が計画に沿っているかどうかを確認する
Act(処置・改善):実施が計画に沿っていない部分を調べて処置をする

見せかたの情報設計をアレンジすることにより、具体的にわかりやすさ、見やすさについてバージョンアップをはかっております。

★ プログラムをより魅力的に伝えるために、細部までこだわって制作しています。

通常ではわかりにくく、見えない部分の裏デザインのこだわり。

Webサイト(ホームページ)訪問者が、一瞬では、なかなかわかりにくい裏の部分のデザインについてご紹介します。

「かさい まちあそび2015・春」では、40プログラムページあります。各ページごとに、タイトルとソーシャルメディアのシェアボタンのdescription=ディスクリプション(概要文・説明文)を設定させていただきました。
実際に、シェアボタンを活用して貰って初めてわかる「裏の機能」の部分です。もちろん、こちらもディスクリプションに関しても、それぞれリライトをさせていただきました。

具体的に画像で見ていただくと、Facebookではこんな感じになります。

food03

さらに、もっと小さなところを見せちゃいましょう!
企業のWebサイトはもちろんありますが、ファビコンも「2014」とは違うんですよ。今回は、テーマカラーに連動して、黄緑色です!一瞬訪問しただけでは特に気にも留めないし、さらに見比べることがないと、なかなか気づかないですよね(笑)

favicon

◆ favicon(ファビコン)とは

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

上記の2点は、Webサイト制作(ホームページ制作)において当たり前のことですが、一般のかたには、なかなか気づいていただけない部分なので、敢えてご紹介してみました!(笑)
もちろん、ディスクリプションなどは、Webサイトならではの機能です。ガイドブックのテキスト(文章)を転載だけで適用するデザインではなく、Webサイトとして成立するために、HTMLのコード記述が必要になってくる部分です。本当にひと手間かかっていて「影の立役者的存在」なのです。

★ 通常では気づかない隠れた部分、細部にまでトコトンこだわって制作しています。

Archive | 加西市「かさい まちあそび」加西市播磨国風土記1300年祭実行委員会 様

関連記事も合わせてご覧ください。

初開催のイベント内容を知りたいかたは、どうぞ!
◆ 【WORKS】加西市「かさい まちあそび2014」加西市播磨国風土記1300年祭実行委員会 様

Webサイト制作ってどんな感じでされてるの??と制作途中の裏話もあります。
◆ 【PROCESS】加西市|「かさい まちあそび2015・春」|第1話

第1話は、主にビジュアルデザインからの視点です。
◆ 【WORKS】「かさい まちあそび2015・春」加西市播磨国風土記1300年祭実行委員会 様|第1話

第3話は、Webプロモーションも含めたコンテンツの話の予定です。

「Six」の業務内容 |「かさい まちあそび2015・春」加西市播磨国風土記1300年祭実行委員会 様の場合

★ WEBブランディングの企画・立案・運用
★ WEBサイト(ホームページ)のデザイン・コーディング
★ コンテンツの企画・制作・コピーライティング
★ WEB戦略プロモーション・コンサルティング(紙媒体との連携プロモーション・プレスリリース提案含む)

★ 「Six」では、ヒアリングなどを通して、オリジナルのコンテンツを1から企画、制作することが可能です。
  クライアント様によっては、一部のテキストや写真などご提供はいただきますが、御社の強みや「○○らしさ」を追求した
  オリジナルのWebサイト(ホームページ)を目指したい場合は、見た目としてのビジュアルデザインの変更だけでなく、コンテンツ企画、
  デザイン制作からWebプロモーションに至る運用にまでトータルにご提供いたします。

あなたのビジネスに最適なWebブランディング・Webデザインをお手伝い致します。まずは、現状の課題をお気軽にご相談ください。