SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

はてなのプロダクト開発の舞台裏

見た目のデザインから意味のデザインへ――はてなのデザイナーがプロダクトの価値を高めるためにやっていること

はてなのプロダクト開発の舞台裏 第3回

デザインを推進するツールはデザインモックアップ

 どのようなプロジェクトにとってもデザインモックアップ(以下モックアップ)は開発に必須の中間成果物でしょう。小さな改善ならばコードを書きながらデザインを施していくのでも事足りる場合が多いですが、施策の規模が大きくなればなるほど計画の難易度が上がり、モックアップの重要性が増していくことは想像に難くないと思います。モックアップはアイデアや仮説のトライアルアンドエラーを容易にして、メンバー間の認識を揃えるためのツールとしても機能します。

魔法のiらんどのモックアップ
魔法のiらんどのモックアップ

 これは2020年4月にリニューアルした魔法のiらんどのために作成したモックアップの一部です。プロジェクトを開始してからリニューアルリリースを迎えるまで、約1年間にわたって手を入れ続けました。エンジニアさんの高い技術力を信頼して、初期の段階からストレッチしたアイデアをたくさん盛り込ませていただいて、リリース当日までの具体的な成果物の目標としての役割を担いました。

 わたしの場合、モックアップは情報アーキテクチャやビジュアルを表すためだけには使っていません。それに加え、企画の想いを込め、開発を推進するために活用しようとしています。

未来絵図

 特に中規模以上の施策では2年後、3年後にこうなっていたらいいなという姿を盛り込んだモックアップになるようにつくることが多いです。これは、前のページでお話ししたアイデアやソリューションの提案とビジュアライズという文脈での活動です。メリットとして、開発メンバーの目線を目の前の機能から未来を見据えたサービスに向けることができるのに加え、プロダクトの改修計画を立てやすくなるというものがあります。

 アジャイルな開発体制をとっている現場では、ユーザーの反応を加味して柔軟性のある計画策定をすることが常ですが、とはいえユーザーの意見をすべて受けいれていれば良いというほど単純なものでもありません。プロダクトの大まかな方向性はチームで描いているはずなので、そのような方向に向かって、まずは大きな道筋をモックアップで描いてしまいます。アイデアを小さくすることは、大きくすることよりも簡単なので、そのあとにユーザーが望むものに歩み寄ったり、マイルストーンにあわせて小さく分割したりして、実現性を高めてゆきます。

 このようなつくり方をしていると、モックアップに表現したアイデアのうち、最初のリリース時点では体感10〜40%くらいのアイデアがかたちになっていくことが多いように感じます。先ほどお見せした魔法のiらんどのモックアップにも、初回のリリースでは実装されていないアイデアがたくさん盛り込まれています。具体的にお話しできないのが心苦しいですが、わたしたちは将来の姿のイメージを持っているため、心を落ち着けて必要なタスクを必要な順番でこなせています。

 モックアップを作成する際には、短期的に実行可能で、現実的なアウトプットになっているかどうかにはあまりこだわっていません。なぜならあとで削ればいいからです。それよりも、すぐ目の前だけを見てデザインすることで、小さな改善策ばかりに注目してしまったり、平凡なアイデアになりがちな状態におちいってしまうことを恐れています。これは本質的な改善のチャンスを見逃してしまうことにつながりかねません。さらには、ユーザーインターフェースの複雑化を招いてしまったり、ユーザーに煩雑な行動をしいてしまったりということもあり得ます。視野の狭くなった開発で継ぎ接ぎが蓄積されていくよりは、視野を広げてリファクタリングをともなった開発を行えるほうが健全な状態といえます。

コミュニケーションツール

 モックアップには進むべき方向を分かりやすく可視化して、一貫性のないディレクションになるリスクや仕様の認識齟齬を抑える役割もあると思います。たいていの開発現場には細かな仕様書も存在すると思いますが、戦略やビジョンが集合して、目にみえるかたちでまとまった中間成果物としては、モックアップが最も強力なものになるでしょう。つまり視覚的な仕様書として、そこでは具体的な情報アーキテクチャとビジュアルが表現されています。アイデアは目にみえるものにならないと具体性が出てこないので、ステークホルダーとの認識合わせにも役立ちます。

 わたしはよく荒削りの状態から開発メンバーにモックアップをシェアしておくという活動をしています。これは完成していない検討段階のモックアップを誰でも見られる状態にしておくということです。おそらく多くのデザイナーが思うように、わたしも作業途中のデザインを他人に見せることに長らく抵抗がありました。しかしその心理的な苦痛よりもはるかにメリットが多いことに気づいてからは、わたしはできる限り早い段階でメンバーにデザインをシェアすることを心がけるようになりました。

 そのメリットというのはさまざまありますが、他者との対話が増えることが個人的にはいちばん気に入っています。仕様についてのやりとりを言葉で重ね続けていても、最終的にはユーザーインターフェースにそれを変換する必要があるので、一定の段階からは、モックアップを目の前に置いた状態で議論をしたほうがコミュニケーションのロスが少なく効率的です。また、誰しも他人のデザインプロセスを見る機会は少ないと思いますが、それが楽しみだとか、それを見るだけでもテンションがあがるという言葉をチームメンバーからよく頂いており、わたし自身のモチベーションにもなっています。詳しくは個人ブログに書いたことがあるので、ご興味のある方は参考になさってみてください。

次のページ
モックアップのチェックリスト

この記事は参考になりましたか?

はてなのプロダクト開発の舞台裏連載記事一覧

もっと読む

この記事の著者

村田 智(株式会社はてな)(ムラタ サトシ)

@murata_s。アートディレクター/デザイナー。武蔵野美術大学視覚伝達デザイン学科を卒業後、2013年はてなに入社。ウェブやアプリの企画、情報設計、ビジュアルデザインをおこない、新サービスの立ち上げやグロースに貢献している。主な仕事に、サーバー監視サービス「Mackerel」、小説投稿サイト「カ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/12452 2020/07/10 11:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー