HTML・ブロック一覧

↑この上に改ページを指定しています。
リードモアも、複数ページの記事も、パーツを挿入するだけ。


↑これが水平線(区切り)↓


↑右側の設定で「高度な設定」の欄に「dot」と入力すると、ドットデザインの区切りが引けます。

↑ダウンロードリンクは「ファイル」ブロックを使用します。タブボックスなどの中に入れるとより目立つのでオススメです。

アイコンボックスは、色とアイコンでどういった情報が書かれているのかを視覚的にわかりやすく表示してくれます。
アイコンが伴うので、「i」にはインフォメーションを書くなど、内容と種類は統一した方が良いです。

案内ボックスはアイコンがなく、色だけで内容の方向性をなんとなく示します。
統一感のある色つきボックスが挿入できる、と思っていればOKです。
インフォだからインフォメーションに使わなければいけない、というわけではありません。

白抜きボックスは、案内ボックスほど主張したいわけではないが、枠線で囲って目立たせたい場合などに使用します。

付箋風ボックスは、白抜きボックス同様に単に文字列を目立たせたい場合に使用します。
デザインが付箋風であるだけです。

見出しもアイコンも自由に選択できる!

見出しボックスは、見出しが付いているのでボックス内がどういった情報なのかを明示することができます。

タブ見出し

タブ見出しは、見出しボックスと異なり見出しがタブのように表示されます。

ラベルボックス

ラベルボックスは見出しの色は連動しません。

黒背景だと背景色の設定がネックで使い勝手悪そうです。

タブボックスはタブ見出しとは異なり、あらかじめタブのテキストが決まっています。
見出しを悩まなくて良いというメリットがあります。
ダウンロードリンクなど、どこからDLしたらよいのか見やすくなります。

トグルボックスとは、クリック(タップ)すると展開したり折りたたまれたりするボックスです。
あまり重要ではない補足や豆知識など、本筋から逸れる話題はトグルボックスに入れることで、閲覧者の導線を邪魔せず記述することができます。

\ マイクロコピー(下寄り) /

マイクロコピーをつけることで購買意欲を煽ります。
ボックスに合わせてセンタリングするといいかも!


/ マイクロコピー(上寄り) \
マイクロコピーバルーン
黒乃響
黒乃響

吹き出しデフォルト

画像左、丸

黒乃響
黒乃響

吹き出しフラット

画像右、四角

黒乃響
黒乃響

吹き出しライン風

画像左、丸、枠線あり

黒乃響
黒乃響

吹き出し考え事

画像右、四角、枠線あり

タイムライン
  • 2018
    時系列でなにかを書くのに見やすい

    たとえば学歴を書いたり
    細かい説明はココに入れます

  • 2019
    アイテム数はタイトルをクリックして右から追加

    最小で1、最大で30です

  • 手順1
    作業の流れを書くにもオススメ

  • 手順2
    次はこうします

    タイムラインのタイトルの文字列を消すと、タイトルなしにできます。
    小項目は入力なしなら省略されます。

タイトルとURLをコピーしました