ホンダが誇る軽量スポーツバイクCBR250RRの魅力を徹底解説。最新モデルの性能や特徴、実際の乗り心地から維持費まで、バイク初心者からベテランまで必見の情報が満載。あなたもこの記事を読んだ後、CBR250RRに乗りたくなるのではないでしょうか？
バイクの買取 おすすめ 無料出張査定の業者とサービスの 特徴
ワイヤーフレーム作り方Figma活用法
手書きスケッチから始めると失敗します。
ワイヤーフレームとは何か
ワイヤーフレームは、Webサイトの設計図です。デザインの詳細を省略し、レイアウトや情報配置、画面遷移の流れを視覚的に整理したものを指します。
参考）【Figma初心者向け】アプリ・webサイトのワイヤーフレー…
色やフォントは使わず、グレースケールで作成するのが基本です。これにより情報構造に集中でき、クライアントやチームメンバーと認識を合わせやすくなります。
参考）Figmaでワイヤーフレームを作成する方法【初心者向け】
プロジェクトの上流でワイヤーフレームを確定させると、その後の作業工程での齟齬を防げます。デザイン制作前に情報設計を固めることで、掲載コンテンツ変更のたびにデザインをやり直す無駄を避けられるんですね。
つまり効率化の基本です。
参考）ワイヤーフレームの作り方を完全マスター！現役ディレクターが教…
Figmaでワイヤーフレームを作るメリット
Figmaは無料版でも十分な機能を使えます。ブラウザ上でデザインができるため、ソフトウェアのダウンロードが不要です。
参考）【初心者必見】Figmaの使い方とワイヤーフレームの作り方を…
コンポーネント機能を活用すると、ボタンやリストなどの要素を一度作れば何度でも再利用できます。メインコンポーネントを修正すれば、すべてのインスタンスに変更が反映されるため、手動で全要素を修正する必要がなくなります。
これは使えそうです。
参考）Figmaでワイヤーフレームを作るテクニック - Xtone…
縦に長いページでも折り返さず作成できるので、更新作業が楽になります。プロトタイプモードで画面遷移を設定すれば、クリック可能な試作品として確認できます。
参考）基本的なワイヤーフレームとプロトタイプの作成 ＆ndash;…
従来パワーポイントで数時間かかっていた作業が、Figmaなら数分で完了するケースもあります。作業時間を8割削減できた事例も報告されています。
参考）作業時間を劇的に短縮！ディレクターのための生成AI×ワイヤー…
ワイヤーフレーム作成の準備手順
まずFigmaのアカウントを作成します。Googleアカウントで簡単に登録できます。画面右上の「+Create」をクリックし、新規デザインファイルを作成してください。
参考）【2025年版】Figmaコンポーネント無料！ワイヤーフレー…
フレームアイコン（左上）を押して、デスクトップサイズのフレームを配置します。キーボードの「F」を押しても同じ操作ができます。フレームの一番下を伸ばして、ページの長さに合わせましょう。
参考）【初心者向け】Figmaで学ぶワイヤーフレームの作り方 ＆#…
コンテンツの優先順位を決めます。CTA（Call to Action、行動を促すボタン）をどこに配置するか、どのような情報をどの順番で見せるかを事前に整理してください。
この段階で構成を考えると後が楽です。
初心者はテンプレートを活用するのが効率的です。Figmaコミュニティには1,000以上の無料テンプレートがあります。デザインの引き出しがない状態で手書きスケッチから始めると、かえって時間を浪費します。
Figmaワイヤーフレームの具体的作り方
ヘッダー部分から作り始めます。長方形ツール（キーボードの「R」）で黒い長方形を作成し、その上にテキストを配置してください。
テキストツールは「T」キーで起動します。
グローバルナビゲーションを作ります。「アバウト」「サービス」などのメニュー項目をNoto Sans JP 16pxで入力し、Option+Shiftを押しながらコピーペーストすると効率的です。
メインコンテンツには、画像エリアとキャッチコピーを配置します。画像部分は灰色の長方形で表現し、テキストには実際に使用する文言を入れてください。ダミーテキストではなくリアルなコピーを使うと、文字量の調整がしやすくなります。
フッターを最後に追加して完成です。アクセス情報やリンク集など、必要な要素を配置しましょう。
列のグリッドを設定すると、要素を整列しやすくなります。フレームを選択した状態で、右パネルのレイアウトグリッド設定から列数を指定できます。
コンポーネント機能でワイヤーフレームを効率化
繰り返し使う要素はコンポーネント化すると便利です。ボタン、リスト、テキスト入力欄などを事前に準備しておけば、他のワイヤーフレーム作成時にも再利用できます。
コンポーネントの作り方は簡単です。コンポーネント化したいオブジェクトを選択し、ツールバーの4つの菱形アイコンを押すだけです。右クリックメニューから「Create component」を選んでもOKです。
参考）https://wentz-design.com/post/figma-how-to-use-component/
バリアント機能を使うと、複数の状態を管理できます。ボタンなら「プライマリー」「セカンダリー」「非アクティブ」の3つを用意し、さらにアイコン付きなどのバリエーションも設定できます。ボタンの種類を明確に定義することで、デザイナーに意図を伝えやすくなります。
リストにはシェブロンや外部リンクアイコンなどのバリエーションを準備しましょう。テキスト入力欄には、入力状態や必須の有無、ラジオボタンやチェックボックスのON/OFF状態も考慮してください。
メインコンポーネントを修正すれば全インスタンスに反映されるため、デザイン変更が圧倒的に楽になります。作業効率が数十〜数百倍変わることもあります。
参考）のんびり学ぶ Figma 〜コンポーネント編〜 (1)
画面遷移とプロトタイプ設定方法
画面遷移を設定するには、プロトタイプモードを使います。Figmaの右上にある「プロトタイプ」タブをクリックしてください。
参考）https://tetsuokawakami.com/entry/2024/10/22/043433
遷移元と遷移先のフレームを用意します。クリックイベントを設定したいボタンから、遷移先フレームへ矢印を繋ぎます。ボタンを選択した状態で、遷移先フレームまでドラッグすると自動的に接続されます。
参考）【Figma】FigmaでUIデザイン~画面遷移~｜▶️ …
右上の再生ボタンをクリックすると、シミュレータで確認できます。ボタンをクリックして画面が変われば成功です。
仕様（アノテーション）を追加する場合は、矢印を使って関連付けます。遷移の矢印と仕様の矢印は色分けすると、見やすさが向上します。
色分けが原則です。
PDFに書き出す機能も便利です。ファイルメニューからエクスポート形式をPDFに指定すれば、クライアントへの提出資料として使えます。
バイク乗り視点のワイヤーフレーム活用術
バイク関連のWebサイトを作る場合、商品写真の配置が重要になります。ヘルメットやジャケットなどのギア紹介では、カード型デザインが効果的です。
カード型は、画像エリア・商品名・価格・説明文を1つのまとまりとして配置します。このレイアウトをコンポーネント化しておけば、商品数が増えても簡単に追加できます。
ツーリングルート紹介ページなら、Google Mapへのリンクを配置しましょう。アクセス情報として地図エリアを確保し、リンクアイコンを添えると分かりやすくなります。
メンテナンス情報やパーツ交換手順など、ステップ形式のコンテンツが多い場合は、番号付きリストの配置を検討してください。ワイヤーフレームの段階で情報の流れを整理すると、後のデザイン作業がスムーズになります。各ステップに画像を添える構成なら、画像エリアの大きさも統一しておくと良いでしょう。
バイク仲間との情報共有にもFigmaは便利です。ブラウザ上で共同編集できるため、メンバー全員でワイヤーフレームを確認しながら意見を出し合えます。ツーリングイベントの告知ページや、オフ会サイトの設計にも活用できますね。
参考）Figmaでワイヤーフレームを書く様々なメリット - Xto…
Figmaの無料ワイヤーフレームテンプレート集
Figma公式サイトが提供する1,000以上のテンプレートから、目的に合ったデザインを選べます。Webサイトやモバイルアプリ向けの豊富なサンプルが揃っています。