Pastelinkersの読むガイド

Web画面の設計からアイコン・インタラクションまで

参考サイトを集めるだけでは、次に何をすべきかはっきりしません。ユーザーの行動を決め、構造を描き、必要なアイコンや動きを選びましょう。小さなサービスの最初の画面を作る順序でツールをまとめました。

Pastelinkers編集 · 原文確認 · おすすめ資料3件

こんな方におすすめ

一人でWebサービスを作る方や、デザイナーと画面構成を相談する開発者・企画担当者に向いています。完成したデザインファイルより先に、画面の行動や流れを整理したい場面を想定しています。

資料を選んだ基準

画面構造を表すツール、統一されたアイコン素材、実装過程を学べるフロントエンドのチュートリアルを一つずつ選びました。同じ機能のツールをいくつも比較せず、その段階で必要な判断に集中できます。

この順番で読んでみましょう

まず画面の主要な行動と補助的な行動を決め、ワイヤーフレームを描きます。次にアイコンの形や大きさを揃え、操作結果の理解に役立つ動きだけを加えましょう。小さなモバイル画面でも同じ流れを確認してください。

  1. ワイヤーフレームやプロトタイプで画面の構造と流れを表すツールです。実際のコードを書く前に、ボタンの役割や画面遷移を説明する下書きに使えます。

    自分で試してみる

    最初の画面を描き、ユーザーが完了すべき行動を一つ示しましょう。その行動と関係ない要素を取り除いても画面が理解できるか確認してください。

    利用前に製品紹介と利用条件を確認してください。体験版があることを、恒久的に無料で使えるという意味に捉えないでください。

    ブックマーク詳細・保存原文を確認 、新しいタブ

  2. 検索できるSVGアイコンとReact・Vueでの使用案内があります。複数の出典を混ぜる前に、一つのセットで探索・保存・設定などの行動を表すのに適しています。

    自分で試してみる

    3つの行動に使うアイコンを選び、大きさと表現を揃えましょう。アイコンだけでは意味が伝わりにくいボタンにはテキストも添えてください。

    Webサイト上のSVGと、プロジェクトに入れたパッケージのバージョンを区別し、アイコンの利用時はライセンス条件を確認してください。

    ブックマーク詳細・保存原文を確認 、新しいタブ

  3. 画面遷移やインタラクションの実装について、チュートリアル・事例・デモを探せます。構造が決まった画面で、どの動きが理解を助けるか比較する最後の段階として選びました。

    自分で試してみる

    デモから効果を一つだけ選び、その目的を書き出しましょう。効果がなくても主要な機能を使えるかも確認してください。

    すべての例が同じフレームワークを使っているわけではありません。公開時期・導入に必要な依存関係・利用条件を先に確認してください。

    ブックマーク詳細・保存原文を確認 、新しいタブ

実習の前に確認

料金・機能・サンプルの依存関係は変わることがあります。導入前にBalsamiqの利用条件、Heroiconsの使い方、Codrops各例のライブラリのバージョンとライセンスを確認してください。キーボード操作や動きを減らす設定でも視覚効果を確認しましょう。

おすすめの理由と実習はPastelinkersが作成しました。原文は各資料の「原文を確認」からご覧いただけます。

世界の旅行計画に役立つWebサイト世界の旅行資料を、おすすめの対象・原文の言語・地域ごとの利用条件とともにご紹介します。家で試せる世界の料理資料世界の料理サイトを、おすすめの対象・原文の言語・材料・利用条件の案内とともにご紹介します。気軽に始める世界の無料講座無料講座の学習対象、原文の言語、登録・修了証の費用、対象地域を一緒に確認できます。Pythonの文法から最初のWebプロジェクトまでPythonの文法、初めてのDjangoプロジェクト、外部APIの例をつなげて学ぶ入門資料集です。JavaScriptの基礎を読んで実践するMDN、NodeSchool、RegexOneでJavaScriptの概念を確認し、小さな問題に取り組みましょう。