岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

Bangladesh いってきます!!

Konnichiwa !!

This is Alam of Yamato Advertising Agency.
This is my last blog before going to Bangladesh. This week I will go home after 1 year. So eagerly waiting for the day to come. There are so many things to do in Bangladesh and so many people to meet. I am looking forward to share some photos when I return.

Although I hope to spend a good time there but I will miss Japan very much. Specially everyone at office. I will find good Bangladeshi Omiyage (Lol).

Bangladesh is not so far from Japan. It only takes 12 hours in the shortest length flight.

So everyone I am inviting you to come to Bangladesh. There is lot of things to see and lot more to eat.

f:id:yamato-alam:20170925202531j:plain
Image source: Dawn Travels

Bangladesh に あそび に きて ください !!

Read more about Bangladesh from

wanderwisdom.com

バングラデシュいけきます!
またね !!

Googleストリートビュー、岡山で一歩先のサービスを!

こんにちは。
みなさんGoogleストリートビューってご存知でしょうか?

Googleマップならもちろん知ってますよね?

そのGoogleマップと密に連携しているのがGoogleストリートビューです。


Googleストリートビューの特徴は何と言っても、画像が360度グルグル見渡せるってことで、博物館やレストラン、お店など、建物の空間をバーチャル体験できます。また矢印にしたがって、建物内を移動することが可能で、最近では学校やホテル、大型施設などでも多く導入されています。

ここ岡山でも続々と導入実績が増えてます。

弊社でストリートビューを導入させて頂いた例を挙げますと、裸祭りで有名な西大寺観音院さん、歯医者さんやクリーニング屋さん、焼き鳥屋さんなど、業種も様々です。



では、Googleストリートビューを導入することによる、ビジネスのメリットとは何なのか?

それは、新規のお客さんへのアピールに強い効果を発揮することだと思います。

例えば自分の日常生活で考えてみましょう。Web上の不動産屋さんでマンションを探すとします。
予備知識が全くない状況で、同じような不動産屋さんのWebサイトがあったとします。
不動産屋さんが出しているお部屋情報で、360度画像があるのと、ないのとでは、どちらのサイトを親切に感じますでしょうか?もちろん、ある方だと思います。
360を見て気に入ったお部屋を、実際にリアルで見に行くことが出来れば、無駄足が減り、お客さんにとっても、店側にとってもハッピーですよね!

お店で言えば、初めてのお客さんの不安を解消することも出来ますし、外国人観光客の人にとっても、訪れるかどうかの有益な判断材料になるでしょう。

世の中、Webサイトが当たり前になったように、ストリートビューも当たり前になるのも時間の問題です。
一歩先に、ストリートビュー導入してみませんか?

詳しくはこちらまで!

yamato-agency.com

【レポート】CSS nite in KOBEに参加しました。

f:id:yamato-ugaki:20170921182823j:plain


兵庫県で開催された
CSS Nite in KOBE, Vol.29へ参加してきました!


お話いただいたことは
「UIデザイン捕物帖 〜デザインフェーズにおけるワイヤーフレームとの付き合い方〜」

講師は株式会社まぼろしの松田 直樹さんです!


Web制作の中で、設計・デザイン・実装・公開という段階があります。
今回は、「設計」と「デザイン」の間で用いられる
ワイヤーフレームの設計についてのお話でした!

f:id:yamato-ugaki:20170921182937j:plain

この記事はHGP創英角ポップ体でお送りいたします。

ワイヤーフレームの目的

ワイヤーフレームとはそもそも何のために用いられるのか。

それはクライアントとディレクター間では「機能要件」や「情報構造」の設定。
そしてディレクターとデザイナー間では「レイアウト指示」や「完成イメージ」を伝えるために使われるようです。


f:id:yamato-ugaki:20170921183758j:plain

同じワイヤーフレームでも、読む人によって与えられる情報が違うということに初めて気づかされました。

そしてワイヤーフレームは両者間で同意(コンセンサス)をとるために使われるということで
逆に同意がとれないと感じた場合はワイヤーフレームではなく突然デザインカンプを出したっていいということです!
通過儀礼として使われがちのワイヤーフレームですが、必ずしも必要ではないのでその時々応じたものを使いましょうということでした。

ワイヤーからデザインへ、ワイヤーを超える

デザイナーの仕事といえば、ワイヤーフレームをデザインに仕上げることですが
ディレクター側からすれば「ワイヤーそのままじゃん」という悩みの種もあるそうです。

もちろんデザインをする側からすれば
「わざわざワイヤーでこの形にしていたのは意味があるのでは?」
「後で『ワイヤーと違うよね、なんで勝手に変えたの?』と言われるかも」という悩み
があります。

そんな中で、デザインがワイヤーを超えるための一工夫を教えていただきました!

特に印象に残ったのはこのふたつ。


「主役を目立たせる」ということ。

f:id:yamato-ugaki:20170921190405j:plain

ひとつめが、掲載内容と機能定義をしたワイヤーを見たままデザインしてはいけないということ。
この場合、あくまでもグラフがメイン
見出しは、グラフが目に留まった人なら読むだろうし、絞り込みボタンも毎日変更するわけではないだろうから隅にアイコン表示でいい、とのこと。
聞いた瞬間、なるほど、と思いました。
ついつい「アイコン+文字」でデザインしてしまいがちですが、リテラシーや閲覧者の学習能力を考えると歯車アイコンだけで通じるということです。
なるほど。

また、他にも多いのが、見出しの入れ子ごとに文字サイズが小さくなっていくこと。
もちろん間違っていませんし、マークアップのときは、検索エンジンが相手のときはそれでいいそうです。
むしろコーディングのことをわかっている人ほど文字サイズの入れ子方式に捕らわれてしまうのかもしれません。

しかし人が見るときは、何が一番重要なのかを考えてデザインすることが大切ということでした。

検索エンジンのことを考えるのがマークアップエンジニア。
人のことを考えるのがデザイナーということですね!

ワイヤー通りに「お問い合わせ」が一番大きな文字でいいのか、
一番重要なのは「電話番号」ではないのか。

特にお問い合わせというセクションは電話番号を見た瞬間、「お問い合わせだな」というのがわかるのも特徴です。
わざわざそれほど大きくする必要もない、ワイヤーから1歩進んだ提案が必要だということです!

他にも

  • 主役はひとまとまりにする
  • 主役を目立たせる
  • 主役はわき役よりも引き立てる
  • コンテキストを反映させる
  • ラベルは行動を明示する
  • ユーザーの操作を減らす
  • 何もない状態にアドバイスをする
  • モーダルとモーダレスを気を付ける

などがありました!
具体例はもっと素敵なイラストで松田さんのスライドをご確認ください。
(どこかで公開されているとよいのですが…!)

ラベルは行動を明示する
もわかりやすいですよね。

ワイヤーに「OK」というボタンがあっても
デザイン段階で「申し込みをする」という行動に即した文章に変えるべきだということです!

また文語よりは口語を用いたほうが、よりユーザーの心理に刺さるようです!
例えば松田さんも例に出されていましたが、「寝る」と「就寝する」のような。
いつも頭の中で「我、就寝ス」とか思わないので、「就寝する」ボタンはどうも他人事に思われがちになってしまいますね。

デザインに迷ったら?

UI Flows という考え方で、何が重要かを見極めるのがおすすめだそうです。

f:id:yamato-ugaki:20170921192258j:plain

塊ごとに、ユーザーが「何をみるのか」「どう行動するのか」を考えると一番大切なコンテンツが見極められるということです!


もちろん
・何を見るのか:電話番号とフォーム
・どう行動するのか:電話をかける
・どう行動するのか:メールを送る

など同じ個所でもどんどん分岐していきます。
とことん書き込んでみたらいいと思います^^と素敵な笑顔でした。

ワイヤーの在り方

今回松田さんの会社では、
「ワイヤーは要件定義・情報設計に特化」ということで、中途半端にデザインの要素をいれないようにしているとのことでした。
その代わり中に何を載せるか、コンテンツだけはビチッと決める!とのこと。

ディレクターとデザイナー間で「決まったことと自由でいいこと」が明確にされていると両者うまくいくとおっしゃっていました。

しかし要件と設計に特化したワイヤーを見てもデザイナーには伝わらないことが多いはず。
そこで、クライアント向けのワイヤー作成の段階でデザイナーさんも話に加わるそうです。

「ここはデザインでカバーします」
「これはなぜこの位置なんですか?」
「この数は可変ですか?固定ですか?」

など設計段階から加わることで、設計しつつイメージも膨らむそうです!
デザイナーさんの工数が増えますね

あくまでも参考として。

ワークショップ

f:id:yamato-ugaki:20170921194824j:plain

後半は与えられた架空の企業の求人サイトを作るというワークショップ。
ワイヤーの初校が配られるので、クライアントになった気分で手直しし、またほかのグループが手直ししたワイヤーを自分のグループで再度ブラッシュアップするというものでした。

私のグループは関西圏のベテランの方が多かったのですが、それぞれがワイヤーから読み取れることに対して意見を言い合う。
例えば「新卒でプロジェクトリーダーを任せらる」とか「1年目から経営プロセスを経営したい、独立志向型の学生がほしい」というクライアントの要望に対し

「じゃあ安定志向型の人は避け、福利厚生の項目はもう少し下に記載しましょう」
「独立志向のあるひとならわざわざ(東証一部上場)と書かなくていいのでは」など。

福利厚生は「募集要項」の一環として優劣つけず必ず必要だと思い込んでいた私にとっては目からうろこでした。


f:id:yamato-ugaki:20170921194532j:plain

あとは社内のワイヤーフレームに慣れすぎていて、
ここまでデザイン要素を含んでいないワイヤーもすごいなと感じました。


本来なら中央揃えであろう箇所も、すべて右揃え。
2カラムにするだろう箇所も箇条書きだったりしました。

ここまでデザインがないと、デザイナーもさすがにこのままデザインにはできない。
ならどう配置するのがいいか、など必ず考えますね…。

とかなり勉強になりました。
私がワイヤーフレームを作るときは参考にしてみたいです。





と、新神戸までえっちらおっちらと移動しながら有意義な半日でした!

最近ワイヤーをいただいてデザインにする業務が多いので、今スグ使える技術として大助かりです!
新しい視点、考え方をもってデザインに落とし込めたらなと思います。


CSS nite 公式のレポートはこちら。
cssnite-kobe.jp

ページトップ