2/22(土)開催!『~デバイスの多様化に追いつけ!~スマートデバイス向けサイト制作の思考術』が終了しました

スマートフォンサイトの設計手法を身に付けよう

株式会社まぼろし 松田 直樹さん

松田さんより「モバイルファーストな設計とは?」というテーマで、「キッコーマンしょうゆ卓上びん」などをデザインしたプロダクトデザイナーの榮久庵憲司(えくあん けんじ)氏の話を交えつつ、「ユーザーが使うことを最優先で考える思考回路」についてを徹底的にお話いただきました。

●ユーザーが操作しやすいボタンの位置
●ボタンの高さは44px + 4pxのマージン
●文字は14px以上
●スマートフォンサイトの基本的なレイアウト
●小さな画面に収めるための情報の精査の重要性
●スマートフォンを使うユーザーのシーンとは? など

松田さんが強調されていたのは、
『制約が多いスマートフォンでのWebサイト閲覧シーンの増加によって、「コンテンツファースト」「ユーザーファースト」を最優先に考える、「Webサイト制作の原点」に返ってきている。
この2つを追究した結果、フラットデザインが普及したのではないか?』
というところ。

つい見た目で「あっ!」と言わせたいと考えがちですが、「見る人」を考えて、「伝わるために」の設計をする。
そのためには「どのように考えればいいのか」という思考術を学ぶことができました。

スマートフォンサイト制作には最も重要なことなのですが、つい忘れてしまいがちなことですね。

スマートフォンサイトの設計手法を身に付けよう松田 直樹さん
スマートフォンサイトの設計手法を身に付けよう松田 直樹さん

ライブコーディング

株式会社まぼろし 松田 直樹さん

松田さんが「どうやってスマートフォンサイトを制作しているのか」。
「制作の際に便利なツール」を、ライブでご紹介いただきました!

松田さんは、Yeoman(ヨーマン)というツールを使い、スマートフォンサイト制作に必要なものをおおよそ用意。
Sublime Text(サブライム テキスト)を使ってコーディングを制作しています。

その後、Grunt(グラント)Bower(バウワー)といったツールを使い、1から行うと面倒な作業を効率化しています。

また、スマートフォンサイトに欠かせない「レスポンシブ・ウェブデザイン」はTwitter Bootstrap(ツイッターブートストラップ)というCSSファイルを読みこむだけで「レスポンシブ・ウェブデザイン」が適用されるものを使って、「コードをコピペするだけで使えるので、楽してください」とアドバイスしていました。

最近のWebサイト制作は、ほぼ「レスポンシブ・ウェブデザイン」なため、なくてはならないツールになっているとのこと。

これらを使うことで、長文のタグを次々と自動で作成する松田さん。
スマートフォンサイトでよく使う、「三本線のメニューボタン」も十数秒たらずでササッと作成していました。

「慣れるまでは難しいかもしれませんが、最初から深いところまで行おうとせず、ちょっとしたところからはじめてみてください。
慣れると便利なので、Webサイト制作が本当に楽になります。」と松田さん。

その一例として、松田さんがデザインから4日で制作したWebサイトをご紹介いただきましたが、その完成度に会場がどよめきました!

最前線で活躍する松田さんの仕事の効率化方法が見れた、貴重なライブコーディングでした。

ライブコーディング松田 直樹さん
ライブコーディング松田 直樹さん

ワークショップ

株式会社まぼろし 松田 直樹さん
NPO法人 あおもりIT活用サポートセンター 古川 勝也

参加者が4~5人のグループに分かれ、「青森大学のスマートフォンサイトを考える」ワークショップを実施。

●考えるのはトップページのレイアウトと内容
●もし、明日から使うとすれば

この条件で、話し合ったプロトタイプをスマートフォンにみたてて印刷した、A3サイズの「用紙」に書いて制作いただきました。

ちょっとぎこちない雰囲気の中で行われたワークショップでしたが、すぐにうちとけて、笑い声も聞こえる中、話し合いが進んでいきました。

後半になると、さすが参加者のほとんどがWebサイト制作者。
だんだん真剣な顔になり、よいスマートフォンサイトにするにはどうしたらいいのか。
意見を交わしていました。

制作終了後には、グループの代表者より、制作したプロトタイプを発表。
講師の松田さんと古川より、総評やアドバイスなどをいただきました。

みなさん、「モバイルファースト」な思考が定着していて、
「今の時期にスマートフォンサイトを使う人とは?」や
「トップページで、すぐ見たいコンテンツは?」について
しっかりと考えられた、レベルの高い発表に!

ワークショップ松田直樹さん
ワークショップ松田直樹さん
ワークショップ松田直樹さん
ワークショップ松田直樹さん
ワークショップ松田直樹さん
ワークショップ松田直樹さん

質疑応答

株式会社まぼろし 松田 直樹さん

質問事項は参加者のみなさんにお渡しした付箋に書いていただき、ホワイトボード貼っていただいたものを、松田さんにお答えいただきました。

質問では
「仕様書や設計書でオススメの様式はありますか?」や
「レスポンシブ・ウェブデザインで重要なポイントは?」という
スマートフォン制作する際に気になっている点から、

「松田さんの歴史マニアっぷりがわかるWebサイトを教えてください!」
という、松田さん個人への質問まで、幅広くいただきました(笑)。

それに対し、どんなWebサイトでも「技術力」や「見た目」にこだわらず、「使う人が使いやすい」Webサイトを制作することを忘れずに制作することが大事だとお話しされていました。

質疑応答松田 直樹さん
歴史好きが高じて、現在の京都のGoogle Mapと平安京の条坊図を重ねた『平安京Map』を作成したそうです。
(スマートフォン対応・GPS機能付き)
質疑応答松田 直樹さん
松田さんより、株式会社まぼろし監修の『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』のプレゼントがありました!
抽選は恒例のあいこジャンケン!

また、最後に、
「ワークショップで「紙」に書いて作るプロトタイプですが、お客さまと、「見て」「さわれる」ものを一緒に話合うことで、意見の相違も防げ、お互いにとってよりよいWebサイト制作をすることができます。
まだ行ってない方がいらっしゃったら、ぜひ制作フローに導入してください。」
といただきました。

ご参加いただいたみなさま、講師のみなさま、ありがとうございました!

~デバイスの多様化に追いつけ!~スマートデバイス向けサイト制作の思考術講師陣