イイダリョウのブログ。デザインWebサイトのデザインや設計を行うとき、昔は工程によっていろんなツールを使い分けていました。私の愛してやまないFigmaWebサイトの制作フローヒアリング(オリエン)要件定義サイトマップワイヤーフレームデザインラフデザインカンププロトタイプフローチャート実装段階もシームレスに最後に私の愛してやまないFigma私の愛してやまないデザインツールFigma、ブラウザ完結のツールです。XDなんかと似た感じです。基本編|株式会社ゼロワンアースさらにビットマップ画像の色調補正もできます!機能的にはフォトショには及ばないがSNSの画像加工に似た感じ!!※参考:UIデザインツールFigmaで画像補正を行う方法|株式会社ゼロワンアース簡単なデザインならこれだけでも完結できちゃいそう♪ブラウザ作業なので場所も選ばない!さらにデザイン画面を作るだけでなく、制作フローのいろいろな場面で活用できる便利な機能があり。Webサイトの制作フローだいたいこんな流れになるかと思う。ヒアリング(オリエン)要件定義サイトマップワイヤーフレームデザインラフデザインカンププロトタイプフローチャート順番は入れ替わったり、省略されるものもある。ヒアリング(オリエン)最初はヒアリングから始まる。依頼元が用意したオリエンシートをいただくこともあれば、こちらが用意したヒアリングシートを埋めることもある。どんな課題や目的があって、誰に向けて、どんなことをしたいのか。どのくらいのスケジュールでどのくらいの規模か、など。※参考:ヒアリングシートから適切な情報を引き出すために必要な7つのポイント要件定義ヒアリングで得た情報をもとに、調査、検討を進めて具体化する。どんな技術を使って、どんなことを実現するか。構築環境、本番サーバ環境をどうするか、など。IT・Web・ゲーム業界専門の人材紹介会社ここまでの内容を共有した上で、デザインや機能の詳細を具体化していく。サイトマップWebサイトであればサイト構成、作るページ数がどのくらいかを把握するためにサイトマップを作成する。コンテンツのグルーピングや階層の深さなども一覧できる。ホームページ作成ならスリーカウント株式会社【浜松|静岡】(他にもWebサイト上に実際に掲載するHTMLサイトマップとGoogleのクローラーに読み込ませるXMLサイトマップもある)※参考:サイトマップって何?SEO効果から作成方法まで徹底解説サイトマップは非デザイナーであればエクセルやパワポ、デザイナーであればイラレなんかで作ることが多いと思われる。これを私の愛してやまないFigmaで作ってみる!例えばAppleのサイトをサイトマップにすると...※参考:Apple(日本)こんな感じ。第三階層以降を省略してるけど、雛形をペタペタ複製して付け足していける!間隔の数値がガイドで出るので見た目も整う!なお、サイトマップは後の修正を考えると、縦ツリーより横ツリーがいいように思う。Figmaのいいところは、プレビュー画面*1をプロジェクトメンバーに共有できるところ!認識に齟齬があったら、画面上に直接コメントを書いてもらえる。BLOGコメントの例さらに権限によってはリアルタイムで複数人で同時編集もできちゃう!(Googleドライブのスプレッドシート同時編集みたいな感じ)ワイヤーフレーム次、ワイヤーフレーム。画面構成を線や文字だけでザッと設計する。この時点で認識の齟齬があると、作り込んだあとの手戻りが不幸なので。※参考:HP作成の初心者でワイヤーフレームの作り方をよく知らない人へワイヤーを作るには手書きでもエクセルでもなんでもいいのだが、Figmaで作ってみる。AppleのTopページをワイヤーにするとこんな感じ。これもプレビュー画面を共有して、画面上でコメントをもらったりして、仕上げていく。この段階は内部確認が多いと思うけど場合によってはもうこの段階から依頼元に見せちゃう!ちなみに私は以前は印刷物のデザインをしていたのだが、その時には「いきなりソフトで作り込まずにまずはザッとサムネイルを描くべし!」と指導されていた。Web業界のワイヤーフレームは印刷業界のサムネイルと見た目や位置づけが似ているなぁと感じた。描き方や使い方を説明します。えまノートデザインラフワイヤーフレームが固まってきたら、配色や文字サイズなどを詰めていく。ラフの段階でどこまで作り込むかはケースバイケース。デザインラフが省略されることもある。kuguru[クグル]もちろんこれもFigmaで。これは先程のワイヤーフレームに色をつけたり文字サイズやフォントなどをブラッシュアップする。ワイヤーよりは完成品をイメージしやすい。デザインや配色の基本についてはこちらも参照。Qiitaこの画面も共有して、作り込み前に「この方向でいきですよね?ね?」と念押しwとにかく手戻りのリスクを減らす。デザインカンプデザインカンプとは完成品とほぼ同じ品質のデザイン見本のこと。kuguru[クグル]下記はAppleサイトの本物のスクショだけど、デザインカンプはもうこれと全く同じような画面をつくる。実装のときも基本的にデザインカンプの数値をそのまま再現する*2※参考:Apple(日本)デザインカンプはイラレで作る人、フォトショで作る人、など様々だが最近はSketchやXDで作る人が増えていると思う。Figmaでも画像などを配置すれば実物をイメージできるカンプを作ることは可能。最初のワイヤーからデザイラフ、カンプとシームレスに同じファイル上で作り替えていく。プロトタイププロトタイプとは画面上の変化や別画面からの遷移をイメージできる見本のこと。株式会社パンタグラフAppleサイトの例で言えば画面の左上のハンバーガーアイコンを押すとハンバーガーメニューな現れるなど。この変化を、実際に画面上の左上のアイコンを押すとハンバーガーメニューが開くように再現する。この画面はワイヤーフレームの時点で作って確認する場合もあるし、デザインラフやデザインカンプの時点で作る場合もありケースバイケース。Design|note凝った機能は専用ツールにはかなわないが、デザインツールとプロトタイプツールが同じだと、修正がスムーズにできるのがメリット!フローチャートフローチャートはプログラミング設計の図。実際にコードを書いたあとの大幅な手戻りを防ぐために、処理の流れを図にして共有する。※参考:若手プログラマー保存版!フローチャート徹底解説と作成カンニングペーパーこのような記号を使う。公式サイト窓を押すと「クイックリンク」が開くこの動きをフローチャートにするとこんな感じこういう処理の流れも図にすると認識の齟齬が起こりにくい。依頼元だけでなく、内部の実装者が別な場合も技術的な確度のチェックになる。フローチャートはプログラミング以外の思考にも適用可能と思ってて、書いてみたのがこの記事。着想から実装まで!素晴らしいツール。最後に以前はデザインを細部まで作り込んでから提示することが多かったけど、それだと手戻りが不幸です。手戻りの可能性は二つあります。依頼元のイメージと違う実装が技術的に難しいXDやFigmaなどで、ラフな段階からガンガン共有すると、認識の齟齬を埋めたり、技術的な確度を詰める作り方ができます!FigmaはWebサイトだけでなく、Webアプリやスマホアプリ、スマホゲームなどにも使えるツールだと思っています。08:49Tweet関連記事2020-01-22【JS】ESLintで構文チェックを事始める以前、フロントエンドの開発環境についていろいろ調べた記事を...2019-10-23【Googleアナリティクス】主なメニューからユーザー層をイメージする以前書いたGoogleアナリティクス(GA)の続きです。CLIのプロトタイプとプロジェクトを作るVue.jsの続きです。CLIをインストールしてみました。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。