W2P3 つぶやきまとめ #DevKan
-
- いいね！4
量産型ぽざうね
@Posaune
みんなが困りそうなこと。「レイアウトどうしよう？」「背景色は？」「フォントは？」「写真も…」でもこれらは外観の話。ちょっと置いておく。 #DevKan
2013-05-16 19:56:59
量産型ぽざうね
@Posaune
Webサイトにはどんな目的があるのか？ それにはどんな機能が必要なのか？ その機能を果たすにはどんな色、形、写真が必要なのか？ こうして外観まで進んでいく #DevKan
2013-05-16 19:58:40
量産型ぽざうね
@Posaune
例えばイベントの告知を例に取ってみる。人狼ゲームの告知サイトを作るとしよう。 #DevKan 人狼ゲーム：http://t.co/JhMME4AcUR
2013-05-16 20:00:00
量産型ぽざうね
@Posaune
人狼ゲームは難しい。人を集めないといけないし、時間もかかる。そして今回は初心者でも参加できるようなイベントにしたい。 #DevKan
2013-05-16 20:00:45
量産型ぽざうね
@Posaune
サイトの目的は、他の人狼イベントに比べて、よいイベントであることを伝えないといけない。今回の価値は「初心者向け」会場はカフェ調の入りやすい雰囲気。スタッフが初心者についてペアでやってくれる。ゲームマスターがとてもやさしい女性で優しく教えてくれる。などなど、一杯。 #DevKan
2013-05-16 20:02:44
量産型ぽざうね
@Posaune
しかし、それを全部文字にした所で伝わらない。Webサイトでは文字だけの情報はスルーされがち。うまくデザインして、これらの情報を「伝える」事が必要。#DevKan
2013-05-16 20:03:43
量産型ぽざうね
@Posaune
そのためにはまずは情報の構造化と優先付け。まず最も伝えたいことを「初心者向け」と絞る。その下にもっと読んでくれる人用に、「ペアで教えてくれる」「入りやすい」などの情報をつける。更にもっと読んでくれる人に・・・ と情報を整理する。 #DevKan
2013-05-16 20:04:58
量産型ぽざうね
@Posaune
情報整理を実際にしてみると、レイアウトっぽくなっている！レイアウトが透けて見えている。このように道筋をたどると自然とビジュアルが見えてくる #DevKan
2013-05-16 20:05:52
量産型ぽざうね
@Posaune
それから情報を伝える最適な形を考える。例えば、前回の参加者の感想などはテキストのままなまで伝えるといいし、会場の雰囲気を伝えるには写真のほうが当然いい。#DevKan
2013-05-16 20:07:49
量産型ぽざうね
@Posaune
文字でも、短い文章でズバッと伝えるのがいいこともあれば文章が多い方がアカデミックに見えていいこともある。 イラストも、写真のほうがいいこともあればイラストや線画がいいもの、動画じゃないと伝えられないものもある。最適な見せ方を考えるのが重要 #DevKan
2013-05-16 20:08:27
量産型ぽざうね
@Posaune
色を考えるときも、「初心者向け」というのを考えると、淡色系の色に寄っていく。このようにしてビジュアルを目的・機能から決めていく。 #DevKan
2013-05-16 20:09:34
量産型ぽざうね
@Posaune
さて、そろそろ後半開始です。後半では松野さん自身がデザインされた Sleipnir For Macのホームページを題材に解説。 #DevKan
2013-05-16 20:24:39
量産型ぽざうね
@Posaune
さて、そろそろ後半開始です。後半では松野さん自身がデザインされた Sleipnir For Macのホームページを題材に解説。 http://t.co/JdZMkCSYjG #DevKan
2013-05-16 20:26:09
量産型ぽざうね
@Posaune
でもそれだけだと足りない。そこでSleipnirの原点に立ち返ると「世界一の先端的なブラウザ」というのを伝えたい。#DevKan
2013-05-16 20:28:00
量産型ぽざうね
@Posaune
そこでとっかかりとして、もしSleipnir For Macが触れるものだったらどのようなサイトにするだろう。実物ならシルバーの薄い製品のイメージ。それをスタジオ撮影するときにどんなバックにするだろう。どんなカメラ映りをするだろう。などを考えていった。 #DevKan
2013-05-16 20:30:19
量産型ぽざうね
@Posaune
ページに使用している画像はすべて原寸で表示するようにしている。それが一番綺麗に魅力を伝えられると感じた。それが「ピクセルひとつまで」というキャッチとも関係している #DevKan
2013-05-16 20:33:26
量産型ぽざうね
@Posaune
Fenrirの他のプロダクトのページには枠があるものが結構ある。でも100%の画像を使う以上枠で縛られるとレイアウトできない。だからこのページでは枠を取り払った。#DevKan
2013-05-16 20:34:35
量産型ぽざうね
@Posaune
ページのファーストビューは、逆に画像が入らないようにした。それはまず最初に「究極の先端的」というキャッチをつたえるためと、「ダウンロードしてもらう」という機能を満たすため。#DevKan
2013-05-16 20:35:54
量産型ぽざうね
@Posaune
ダウンロードボタンはファーストビューにある唯一のカラーが有るオブジェクトなので印象に残る。中央に1つだけなのも印象に残すため。#DevKan
2013-05-16 20:36:59