NEW
Ver.3.2 すべての体験をアップデート

  1. トップ

ブランドサイト

世界の国旗


『世界の国旗』ミニサイトについて

“デザインを通して世界を学ぼう” をテーマに、世界の国旗について解説するミニサイトです。 国旗の簡単な読みとき方や、デザインの色や形に込められた意味。国旗ができたときの歴史的背景などを、デザインや歴史上の人物にまつわるエピソードを交えながら紹介しています。

ミニサイトって何?

ミニサイトは、簡単に言うと小さいウェブサイトのことです。ニッチなテーマに絞り込んで作るところが特徴で、小さな辞書や説明書のような役割を果たせるサイトのことを言います。

★ミニサイトの特徴

・絞り込んだニッチテーマ ・コンパクトサイズ ・全体設計を重視 ・時系列、投稿順に記事が並ぶブログとは違い、目次順に並ぶ ・ページ数は、5〜40p以上とさまざまなものがある ・基本的には、完成したら特に記事を書く必要がない

参考ページ


自分が好きなもの、詳しいこと、取り組んできたことを生かせるので、個人でも作りやすく、ミニサイトを作る人も増えています。『世界の国旗』はまだまだ記事が少なく、本格的な運用はこれからなのですが、ブログでもなくウェブサイトでもない、少し新鮮なサイトづくりに挑戦しています。



この企画について

このミニサイト運営は、クライアントワークではなく、あくまでも個人の研究と趣味をかねて取り組んでいるものです。もしクライアントワークなら、きちんとしたマーケティングや企画が必要ですが、今回は違います。最初から色々なことを決めていたわけではありません。こういうサイトを作ってみたい!という気持ち以外で、何を印に取り組んできたのか紹介します。

・デザイナーとして「違う文化を横断できる力」を伸ばそう。

少し説明がややこしくなるので、昨年書いたブログ記事を掲載します。 世界中のデザイナーが、”重要になる”と考えている「異文化間スキル」って何?と調べ始めたことがそもそものきっかけです。


このように、最初は国旗はなかったのです。タイトルも『世界のデザイン』にしていました。

・国旗のデザインについて、体系的に詳しく学べるサイトはない!

上に貼った記事を書いてから、図書館で、国旗の本に出会いました。 結局、異文化を知ることでしか文化の壁は超えられないよなあと思っていたところでした。 それなら、世界の色々なデザインを紹介するブログを書こう。と考え、題材を探すために図書館に行ったのを覚えています。

最初は、世界の建築や料理についてなどを検討していましたが、国旗の本を見たとき、なにか、自分にぴったりだと思いました。また、国旗の本はたくさんあるけど、国旗のデザインについて詳しく体系的にまとめたウェブサイトはありませんでした。あ、ないんだ!じゃあ、私が作ろう!みたいな感じで、それから国旗の勉強を始めました。実際に取り組む中で、自分がこれをやっている理由もたくさん発見しました。

・とにかく、自分が納得しながら、楽しく続けること。

実際にやってみて、この挑戦は、自分が想像していたよりずっと高い山なんだ。と気づきました。 国旗について調べていると、たどり着くのはデザインというよりむしろ、世界史でした。各国の歴史は繋がっているので、広大な、歴史の勉強が必要だったのです。また、国旗の由来や歴史について、間違いのない情報を発信するためには、充分な考証が必要不可欠でした。

そんな中で、とにかく続けるために大切にしているのが、自分が好きなようにやる。ということです。 続けていく中でしかわからないことばかりですし、わたし自身が考える正解もどんどん変わっていきます。ですから、このミニサイトがこれからどうなっていくのか、正直まだわかりません。でも、最初に書いた「異文化間スキル」のブログ記事を見る限り、けっこう遠くまできたなあと感じています。

カスタマイズについて

特別なカスタマイズはなにもしていません。 基本的に、システムに時間をかけるのではなく、コンテンツ制作に集中したいと考えています。 a-blog cmsはデフォルト機能が充実していて、デザイナーのわたしでも、やりたいことを簡単に実現できるのでありがたいです。初めて作るミニサイトでも、少しずつ形を模索したり調整できるので安心しています。

今後は、おすすめの国旗本を紹介するコンテンツや、a-bog cmsの機能を使った、記事の英語対応などを予定しています。一旦リニューアルが終わったので、まずは少ない記事を増やしていきたいです。


太洋商事株式会社

サイトリニューアルにあたって

冷蔵設備などに使われる冷媒ガスを取り扱う太洋商事株式会社さまのコーポレートサイトのリニューアルをさせていただきました。Webサイトリニューアルにあたり、いただいたご要望は以下の通りです。

  • 信頼感のあるブランドイメージを構築したい
  • マルチデバイス対応(スマートフォン、タブレット)
  • 社内の誰でもサイトを更新できるようにしたい
  • 海外進出のためにサイトを英語対応したい

トップページ(PCビュー)

事業案内ページ(PCビュー)

配色・ビジュアルデザイン

「”地球環境の保護”と”快適な暮らし”の共存」というコーポレートメッセージを表現するために、ダイナミックな画像・写真によるブランドイメージ向上と、事業についての情報を伝える具体性のバランスを取ったデザインをご提案しました。 配色には、大地や空、緑、海を感じさせるアースカラーを導入し、見出しのあしらいなどでモダンな印象を演出しています。 Webフォントサービス「FONTPLUS」を導入して、見出しに「筑紫ゴシック Pro」を使用しました。モダンなたたずまいの中にも骨太な印象のあるフォントです。

動き・エフェクト

ご要望を受けて、モダンなアニメーション、エフェクトを導入しました。ブランドイメージ向上、高級感の演出だけではなく、読ませたいコンテンツをより目立たせる狙いがあります。

コンテンツ整理とブランド価値の再発掘


商品写真の撮影も担当しました


以前のWebサイトのコンテンツや既存の会社案内の内容から、よりWebとして伝わりやすく・運用しやすいコンテンツを再設計しました。中部エリアにおける業界のパイオニアであり、幅広い事業と競合他社との違いをアピールすることを意識しています。

Webサイトの掲載コンテンツ刷新のために、冷媒ガスなどの取り扱い商品の写真撮影と取材を行いました。カタログ的な写真だけではなく、商品の新たな一面を発掘できるような華やかなビジュアルを制作しています。

「誰でも運用できる」体制を整える


デザイン性の高いカスタムユニットで柔軟なエントリーを作成


「HTMLの知識がなくてもWebサイトを更新できるようにしたい」というご要望を受けて、a-blog cmsの導入をご提案しました。カスタムフィールドやカスタムユニットを活用して、「ログインして、変更したい部分をクリックする」という基本のルールだけを覚えればWebサイトを自由に更新できるように構築しました。


頻繁に使う機能は目立つボタンを設置


更新頻度が高い「お知らせ」はひと目でわかる位置にエントリー追加ボタンを設置しました。 クライアントさまのオフィスで更新レクチャーをした際には、HTMLの知識がないスタッフの方でも更新ができるとご好評をいただいています。

クライアントさま専用の更新マニュアルを作成し、更新レクチャーを受けていない方でもWebサイトを触れる体制を目指しました。

多言語対応機能でグローバルな情報発信を


多言語ユニット機能とカスタムフィールドを組み合わせた英語版サイト


!クライアントさまに海外拠点があるため、英語での情報発信ができるようにa-blog cmsの多言語ユニット機能を導入して日本語・英語の2言語に対応しました。

ルール機能とエイリアス機能を組み合わせて、ユーザーエージェントと日・英バージョン別に細やかなご要望にお応えできる設定をしています。


富山森のこども園

a-blog cms の同梱テーマ「extend@beginner2018」をほぼそのまま使用したシンプルなサイトです。複雑なカスタマイズ、凝ったデザイン、大規模なサイトに向いている一方で、こういったオーソドックスな小規模サイトを短納期で仕上げることが可能なのも a-blog cms の魅力です。テーマには scss ファイルが含まれているため、余白や色やフォントをカスタマイズして雰囲気を変えることも簡単です。

手間がかかっていたイベント情報の伝達、参加申込の管理をスムーズに

もともとイベント情報(日時、場所、持ち物、備考など)の伝達はメーリングリストで行われていたため見落としが多いことがお悩みでした。また、外部からの参加申込の管理にも手間がかかっていました。


カスタムフィールド でイベントを登録


このお悩みを解決するため、イベントに必要な情報をカスタムフィールド に入力できるようにしました。JSで開催日と日付、終了日と掲載期限が同期するようになっています。イベント一覧で日付直近順でソートすることができ、イベントが終了する日には自動的にイベントが非公開になります。


フォームモジュールで各イベントエントリーに参加申込フォームを設置


イベント予約フォームの「設置する」がチェックされている場合には、イベント予約フォームが各イベントエントリーに設置されます。a-blog cms のエントリーにフォームを設置するやり方には「動的フォーム」と「フォームモジュール」の2種類がありますが、今回の場合はフォームの内容は一定であるため、「フォームモジュール」を使っています。


内部用カレンダーにはイベントへのリンクがカレンダー形式で表示される


また、シークレットブログとして作成した内部用カレンダーではスタッフの方がカレンダー形式でイベントのスケジュールを確認できるようになっています。


ディンプル美容室

地元の方に愛され続ける美容室のウェブサイト

地元の方に長く愛されている美容室。ディンプル美容室のウェブサイトは、見る人の年齢幅も広いことから、シンプルで見やすいデザインにしました。また、スタッフの写真とメッセージでお店のほっこりした雰囲気が伝わるり様々なサービスがあることが伝わるようにしました。 ロゴマークも元気をもらえて活気のある美容室であることが一目でわかるよう、びっくり箱と笑顔をモチーフに新しくリニューアルし、ウェブサイトでデザインにとっても印象に残りやすいように工夫したポイントになっています。 当初、予約フォームなどの設置も考えましたが、メールをチェック・返信などのが負担になるかもしれないため、LINEにお問い合わせ・予約などを集中させ、簡単に返信などできるようにしました。



シンプルなデザインで見やすいデザイン

お店のカラーのグリーンを使い、やさしいイメージにし、写真・文字などのレイアウトもできるだけシンプルにして余白を広くし、見やすく読みやすいように工夫しました。 シンプルなデザインにすることで、様々な大きさのデバイスでも統一したデザインできるメリットもありました。

グローバルメニューも上部固定で操作しやすく

グローバルメニューは、上部に固定しスクロールしても操作しやすいUIになっています。レスポンシブデザインのため、スマートフォンの時はハンバーガーメニューにし、且つ電話もかけられるようにしています。フッターにも分かりやすいナビゲーションを設置して、操作性を高めています。



スタッフ紹介ページで親近感を

スタッフ紹介ページでスタッフの方を詳しく紹介することで、親近感をもってもらい来店につなげていけたらと思いました。はじめて美容室を利用したお客様でもウェブサイトのスタッフ紹介ページを見て、以前から知っている人に施術してもらっているような効果もねらっています。 地元密着型のお店にとっては、スタッフ紹介ページはとても重要など感じました。

施術メニューと料金を分かりやすく

どのようなサービスがあるのか、料金がいくらなのか、来店したことがないお客様にとっては一番気になることかもしれません。そこを正確に分かりやすく伝えることを心がけました。他のお店ではやっていない「無料送迎」や「訪問美容」もしっかりアピールし、サービスが豊富であることを伝えています。

継続してブログ記事を書いていただけるように

ネットリテラシーがあまり高くないオーナーさまでも、継続してブログの記事を書いていただけるようにブログの更新が簡単なa-blog cmsを選びました。 文字をたくさん入力するのが苦手な方でも、たくさんの写真を簡単にアップできるので継続してブログを更新していただけています。


ナチュリエ

「ナチュラル&スローな家」がコンセプトの、自然素材の新築一戸建て住宅のブランドサイトです。 実際に住んでいるオーナー様をインタビュー形式で紹介した「オーナーインタビュー」、建築中の様子を振り返ることができる「建築日記」など、豊富な事例を複数のフォーマットで展開しつつ、同一の施工主を「関連エントリー」として紐づけています。 また、コンテンツの順番が柔軟・かつ自動的に切り替わる仕組みを導入し、パーソナライズ化のエッセンスを取り入れ、住宅の検討段階に応じ、ほしい情報にアクセスしやすくなっています。

SNSとの結びつき

住宅の販売にあたり、オープンハウスや様々なイベントを開催しているナチュリエ様。ウェブからの集客に力を入れており、記事ページにPinterestの登録ボタンや、SNSシェア用のボタンを配置し、サイト外のチャネルを積極的に作る仕組みを導入しています。



全国の加盟店が続々とイベント情報やブログ記事を投稿

加盟店が何店舗かあるため、アカウントをそれぞれ作り管理しています。編集権限を「投稿者」にすることで、エントリーの作成のみできるようにしました。 また、素敵な住宅の事例を多く公開するため、a-blog cmsのエントリーとして管理。 フォトギャラリーやオーナー様のインタビューなど、写真を中心としたコンテンツを数多くCMSとして管理できます。



スタッフの登録もCMSとして管理しており、スタッフ紹介やブログの投稿者に自動で反映させることが可能となっています。


スタッフ紹介ページ

スタッフブログページ

イベントの開催も盛んなので、スタッフブログや店舗紹介ページとイベントページを連動しコンバージョンにつながる動線を取り入れています。

スマートフォンでも使いやすい設計

スマートフォンの表示にも配慮しており、すぐにコンバージョンできるよう、下部に電話などのボタンも配置しています。電話番号はcookieを利用して、ユーザーがスムーズにアクションを起こせる環境を作りました。初期状態は「店舗紹介」ですが、店舗ページにアクセスすると「◯◯店に電話」へと切り替わり、手軽にお問い合わせができるようになります。


初期状態

店舗ページにアクセス後

タグとランキングを活用したコラム

コラムページは、家具の選び方や家づくりのヒントなど役立つ情報を発信しているコンテンツです。a-blog cmsのタグ機能を利用して、ユーザーがスムーズに見たい記事を絞り込めるようにしました。そして、人気の記事がひと目でわかる、a-blog cmsの機能である「Google Analyticsランキングモジュール」を導入しています。Google Analyticsと連携することで、1ヶ月間の閲覧数の多い記事をオートマチックに紹介できます。



お試し環境の用意はおまかせ!
a-blog cms のテスト環境を30日間無料でお試しいただけます