岡山市・倉敷市でホームページ制作なら”ぱっとカエル”!

ぱっとカエルコラム

2021.01.18

ぱっとカエル小技「流れ図や矢印で分かりやすいレイアウト」

こんにちは!岡山・倉敷でホームページ作成なら”ぱっとカエル”
カエルくんのホームページブログです。

閲覧者に伝わりやすい画面作りには、グルーピングや関係性を視覚化することが重要です。
同じ枠で囲んだり、矢印で繋いだり。
同じ枠で囲むのは同じパーツを使えば簡単だけれど、矢印で繋ぐのはどうしましょう?

 や  で繋ぐのではちょっと格好悪い。矢印画像を挿入するしかないのかな?

そんな時はパーツを上手に活用しましょう!

※ご紹介するパーツはレスポンシブデザイン専用パーツです。
非レスポンシブデザインをご利用のユーザー様はご利用いただけません。ご了承ください。

流れ図・矢印パーツはテキスト系

流れ図や矢印のパーツは「テキスト系」パーツの中にあります。

パーツの追加でテキスト系パーツの一覧を開きます

パーツの追加方法を復習!

追加方法は2種類あります。

<方法1>

  1. パーツを追加したい箇所の上にあるパーツの上で右クリック。
  2. 「コンテンツパーツ」>「パーツの追加」で「コンテンツパーツの追加」画面を開きます。
  3. タブごとにパーツが分類されているので、使用したいパーツ種類のタブをクリックします。
  4. 表示されたパーツ一覧の、使用したいパーツのアイコンをクリック。パーツが追加されます。

<方法2>

  1. パーツを追加したい箇所の上にあるパーツを左クリックで長押しします。
  2. 1のパーツがオレンジ色の枠で囲まれたら枠の右下にあるメニューの「+」(追加)ボタンをクリックします。「コンテンツパーツの追加」画面が開きます。以降は方法1の3、4と同様です。

アクセス道順パーツ

流れ図色々と矢印

パーツの種類

パーツを実際に見てみましょう!

アクセス道順

道順を表現するのに便利な「アクセス道順」です。
一列バージョンと二列バージョンのパーツがあります。

  • 停留所:岡山駅前(路面電車)
  • 路面電車「東山線」 東山行 (7分)
  • 停留所:県庁通り(路面電車)
  • 徒歩 (3分)
  • ネットリンクス(株)
流れ(ライン)

ラインで結ぶ流れ図です。ラインの種類は直線と曲線を選択できます。

01

資料ダウンロード

ご希望の資料をクリックして、入力フォームに必要事項をご入力ください。

02

ダウンロードボタン押下

入力フォーム送信後にダウンロードボタンが表示されます。
ボタンをクリックすると自動的にダウンロードが始まります。

流れ(横並び)

横ならびに矢印で繋げる流れ図です。

STEP 1

流れ(横並び)

パーツの追加でパーツをいれます。

STEP 2

流れを追加

同じパーツを追加か、コピーすると横に並びます。

STEP 3

必要なだけ追加

追加すると横にどんどん並んでいきます。

パーツの大きさを考慮すると、3~5個がバランスが良いです。

流れ(矢印付き)・流れ(矢印なし)

縦並びに矢印で繋げる流れ図です。
一番最後には矢印が付かない「流れ(矢印なし)」パーツをいれます。

01

流れ(矢印付き)

流れ(矢印付き)を追加します。

02

追加・複製

上のパーツを複製するか、「流れ(矢印付き)」パーツを追加します。

03

流れ(矢印なし)

最後に「流れ(矢印なし)パーツを追加します

デザインによっては、上記のような見出し設定付きなっている場合があります。
見出し設定が不要な場合は、未惰性設定部分を削除してご利用ください。

流れ(矢印のみ)

以下のような矢印のみのパーツもあります。

矢印のみのパーツなら、お好きなパーツと組み合わせることができます。

このパーツは上のパーツの二列バージョンです。

このように、デザインが違うパーツと組み合わせたい時に便利です。

ご不明の時はお問い合わせください

使ってみたいパーツはありましたでしょうか。
ぱっとカエルでは新パーツを随時追加しております。
便利なパーツが色々あるので、是非ご活用ください。

「パーツを変更したいけれどうまくできなかった」
「初めてパーツを追加するのでサポートして欲しい」

そのような時は、お気軽にお問い合わせください 
Zoom・チャット・メール・電話などでサポートいたします。

お問い合わせはこちら

※訪問サポートの場合は別途料金がかかります。ご了承ください 


岡山で簡単に更新できるホームページCMSをお探しなら“ぱっとカエル”
ご要望があればサンプルサイトもすぐにご用意できますので、お気軽にお問い合わせください☆

  1. 岡山市・倉敷市でホームページ作成なら「ぱっとカエル」
  2. ぱっとカエルコラム
  3. ぱっとカエル小技「流れ図や矢印で分かりやすいレイアウト」
ページの先頭へ戻る