Chapter 03無料公開

画面設計

かよ
かよ
2021.12.31に更新

画面設計

前回のチャプターで紹介したコンセプトの整理が終わったら、サービスの画面設計をしていきます。

画面設計とは写真のように、文字や写真、ボタンなどをどこに置くかをコーディング前に事前決めておくことです。

なぜ画面設計が必要なのか?

必要な理由としてはこの2点だと思います。

  • 実装がスムーズになる
  • ポートフォリオの画面が綺麗になり、評価が上がる

実装がスムーズになる

画面の設計を最初にしておくことで、コードを書いている途中で、悩むことがなく、開発に集中できます。

ポートフォリオの画面が綺麗になり、評価が上がる

機能がそんなに充実していなくても、画面が綺麗なだけで、ポートフォリオのクオリティが高く見えます。

逆に、どんなに機能がすごくても、画面が汚いと、マイナスに働くことがあります。

具体例でいうと、

デザインを全く気にしないで作ったポートフォリオ

デザインを気にして作ったポートフォリオ

全く同じ機能でも後者のほうがクオリティが高く見えませんか?

画面設計の勉強方法とやり方

画面設計が大事なのはわかったとしても、デザイナーじゃないし、そんなに画面設計に時間をかけていられない...。

そんな方に最短の時間で、効率よくデザインを勉強し、画面設計できる方法を教えます...!

デザインの基礎をざっくり学ぶ(1h)

私は下記のサイトでデザインをさらっと学びました。

ユーザーインタフェイスのデザインのヒント(Apple)

Appleが提案しているヒューマンインターフェースのガイドラインです。

マテリアルデザイン(Google)

Googleが提案しているヒューマンインターフェースのガイドラインです。

Cocoda

デザインをつくる>基礎から学べるのところで、デザインの基礎的な部分を実践的に学べます。

似たようなサービスのデザインを見まくる(30min)

サラッと勉強したら、自分が作りたいサービスに似ているサービスのデザインを見まくりましょう!

例えば作りたいのが、写真投稿サービスだったら、Instagramやpinterestが参考になりますね。

サービスのプロトタイプを作る(2h-)

軽く勉強したら、実際にサービスのモックを作っていきます。
プロトタイプを作るツールは色々ありますが、今回はAdobe XDを使います。

Adobe XDを選んだ理由は以下の3つです。

  • 操作が簡単
  • 無料でクオリティが高いものを作れる
  • 型が用意されていて簡単につくれる

デザインをガッツリ勉強していないエンジニア志望、またはエンジニアの方でも簡単に使えるのでおすすめです。

step1.必要な画面を箇条書きする

サービスを作る上で、必要となる画面を整理していきます。
作るサービスによりますが、大体こんな感じになると思います。

作るサービス

目標達成サービス

主な機能

  • 目標登録機能
  • 目標に向けて行動すると木が育つ機能
  • シェア機能

必要な画面

  • 新規登録画面
  • ログイン画面
  • 目標一覧画面
  • 目標詳細画面
  • 目標登録画面
  • ユーザー詳細画面
  • ユーザー編集画面
  • トップページ(後ででも可)
  • チュートリアル画面(後ででも可)

step2.下準備としてノートにモックをまとめる

いきなりXDで作るのは難しいので、ざっくりノートにまとめます。
どうせXDで作り直すので、丸とか、文字とか適当です笑

参考になるアプリをよくに置いて作るといいと思います。

step3.AdobeXDで作る

ざっくりノートにまとめたら、AdobeXDでプロトタイプを作っていきます。

1.Adobe XDのスタータープランをダウンロードします

2.ダウンロードしたものを開いて、会員登録していない方はします

3.会員登録するとすべてのアプリのタブでこんな感じのページになると思うので、開くを押してください。

4.ホームから矢印のスマホ用のプロトタイプサイズを選びます。

※今回はスマホ用のプロトタイプの作り方のみを書きますが、web用のサイズのものもほとんど同じ作り方になります。

webサービスの場合でも、ほとんど見てくれる方はpcではなくスマホからになるので、スマホサイズのデザインから初めて、余力があったらPCのデザインもしたほうがいいと思います。

5.スマホサイズの型?をコピーしてたくさん並べていきます。

6.ファイル>UIキットを取得>ワイヤーフレームを押します

7.そうすると、Adobe XDが提供しているワイヤーフレームのダウンロードページが出てくるので、そこをクリックしてダウンロードします。

8.ダウンロードしたもののフォルダから、wireframes-mobile-2021というものをクリックします。

そうするとたくさんのワイヤーフレームがでてくるので、自分に必要なワイヤーフレームをコピペして5で用意したものに貼り付けます。

貼り付けたものの文字やサイズなどを適宜変えれば、基本は完成します。

ノートに書いたプロトタイプを見ながら、近いUIキットをコピペして文字などを変えていきます。

すべての画面を作り終わったら、画面遷移の流れを入れていきます。

簡単に矢印を入れていきたいと思うので、FlowKitというプラグインを入れていきます。

プラグイン>プラグインを参照を押します。

すると、色々なプラグインが出てくるので、参照というところから、FlowKitを検索し、ダウンロードします。

プラグイン>FlowKitを押します。
すると、いろんな線が選べるので、自分の好みを選んでみてください。
先の太さ、向きなども変えられます。

矢印をつけたら、画面設計は大体完了です。お疲れさまでした!

参考までに、実際に私が作ったものはこんな感じです。

補足

こちらでいろんな有名企業がだしているUIキットをダウンロードできます!
Adobe製のものではなく、AppleなどのUIキットを使ってプロトタイプを作ることもできます。

次のチャプターでは、機能設計のやり方を紹介します。