今回は、雑誌にようにわざとレイアウトを崩す「ブロークングリッドレイアウト」を作ってみます。

目次

1. 雑誌のようなレイアウトを作れるのか？
2. ページを分割して1ページのように見せる
3. ページの高さ調節とタイトルの設定方法
4. Canvaでブロークングリットレイアウトを作る方法
   1. 写真を背景にして、サイズや配置を変える
   2. 背景画像のサイズや配置を変更する
5. フレームを「余白」のように見せる方法
6. テキストの下に半透明の背景を敷く
7. 写真をおしゃれにレイアウトする方法
8. Canvaでリンクボタンを作る方法
9. ボタンにリンクアドレスを設定する方法
10. 写真のレイアウトをおしゃれに崩す
11. ドット柄の背景を作る方法
12. ドット柄を最背面に移動させる
13. テキストを円形に沿って湾曲させる方法

　

　

SAKUWEB さくうぇぶ

　

雑誌のようなレイアウトを作れるのか？

今回は理念やカフェ情報を作っていくのですが、今まで作った整列したレイアウトではなく、

雑誌のように崩したレイアウト「ブロークングリットレイアウト」を作っていきます。

　

以下は、ふじ交通（有）様の「日勤の給与明細」ページです。

　

　

　

このページのようにわざと配置をずらすことで、単調だったページに動きを出すことができます。

　

とはいえCanvaの仕様上、こういうレイアウトには対応していません。

作れはしますが、やはりスマホ表示でトラブルになります。

　

Canvaでは、以下の仕様があります。

　

いろいろ試した結果、そのものはできませんでしたが近づけることはできました。

　

　

ページを分割して1ページのように見せる

Canvaの仕様上の問題を解決するために、

「パーツごとに1ページ作る」という方法で作ります。

以下が今回作るページです。

　

　

　

というように、パーツごとにページを作っていく方法です。

　

1番目「タイトルパーツ」ページにだけ、ページタイトルを設定し、ナビゲーションに表示させます。

これなら、3ページで構成していても1ページのように振る舞うことができます。　

　

ページの高さ調節とタイトルの設定方法

まずはタイトルパーツです。

他ページからタイトルをコピーして貼り付け、タイトル名を変更しておきます。

　

ページの高さを調節しておきましょう。

　

　

　

次に、ページタイトルを設定します。

　

　

これで、ナビゲーションに「ねこぐるみCAFE」が追加されました。

そして、1番目の「タイトルパーツで1ページを作る」が完成です。

　

Canvaでブロークングリットレイアウトを作る方法

2番の「ねこぐるみCAFE」パーツを作っていきます。

「新規ページ」を作っておきます。

また、背景画像に使う画像を選んでページに配置しておきます。

　

写真を背景にして、サイズや配置を変える

まずは、画像を背景に設定していきます。

　

　

　

背景画像のサイズや配置を変更する

スマホの表示を確認しながら、背景画像の配置やサイズを変えていきます。

ディスクトップで画像のメインとなる部分が中央に来るように配置すると、

スマホで見た時も、メインが表示されるようになります。

　

ページをダブルクリックするか、以下の方法で変更します。

　

　

写真の四隅に丸印が表示されますので、ドラッグして配置やサイズを変更します。

　

本当はここでページより画像を小さくしたかったのですが、Canvaではページ全体に配置しないとダメでした。

　

フレームを「余白」のように見せる方法

次に、背景画像の上に白いパーツを配置します。

ここで使うのは「フレーム」です。

　

　

　

このL型フレームを回転させて白に変更すれば、右と下の白いパーツを作ることができます。

　

　

　

　

これで背景の画像を小さく見せることができました。

ちなみに「図形」「グリッド」で同じレイアウトは作れます。
ただ、スマホで1カラム扱いになってしまうので、フレームを使いました。

　

テキストの下に半透明の背景を敷く

テキストパーツを配置しますが、写真と被るように配置していきます。

画像の上にテキストを配置する際には、テキストが読みにくくならないよう考慮する必要があります。

今回は、テキストパーツの下に半透明のボックスを敷きます。

背景画像もうっすら見えるし、読みにくさも回避できます。

　

テキストパーツを作り、図形を選んで配置しておきます。

　

　

　

サンプルサイトでは50にしています。

テキストパーツの下に、半透明の図形を配置したので、背景画像の透けて見えるようになりました。

スマホで確認しましょう。

　

　

ディスクトップでは、右と下が白色になっていたのですが、
スマホでは下のみで右は表示されません。

右を白にしたくてもできなかったので、ここは妥協しました。

これで2番「ねこぐるみCAFE」が完了です。

　

　

写真をおしゃれにレイアウトする方法

次は、3番目のカフェ情報です。

　

　

右側に配置した2枚の写真のレイアウトを崩します。
まずは、左側のテキストパーツを作りましょう。

他のページからテキストをコピーして、編集しておきます。

　

Canvaでリンクボタンを作る方法

「MAP」ボタンをつくって、外部リンクのアドレスを設定していきます。

　

　

ボタンにリンクアドレスを設定する方法

ボタンをクリックしたら、設定したアドレスに移動させます。

通常なら、別タブで開く設定ができるのですが、Canvaでは設定できそうになかったです。残念・・・・。

　

　

　

これで、リンクボタンが完了です。

ただ、「MAP」に下線が付与されてしまいました。
上メニューの「下線」をクリックすれば削除できます。

　

写真のレイアウトをおしゃれに崩す

整列させるレイアウトは、整然としてキレイな印象にはなりますが、
ユーザーにスルーされてしまう可能性もあります。

あえてレイアウトを崩すことで、ユーザーの注意を引くことができます。
ただ、雑然とした印象にならないように気を付ける必要はあります。

写真2枚を選びますが、縦長と横長の組み合わせにします。

　

　

配置や組み合わせによって、
雑誌のような自由度の高いレイアウトができるのがブロークングリットレイアウトです。

Canvaでは作るのが難しいですが、
工夫次第でおしゃれなサイトも作れます。

最後にドット柄+「Cat & Cafe」を配置していきます。

　

　

ドット柄の背景を作る方法

Canvaの素材「グラフィック」に、いい感じのドット柄を探しましたが、なかった・・・ので自作することにしました。

L字型を作った時と同様に、フレームでドット柄を作ります。

　

　

　

これで好きな場所やサイズでドット柄を配置していきます。

　
ただ、スマホで見た時に1カラムにならないように円形の配置には注意してください。

配置が決まったら、レイヤー順を変更しましょう。

　

ドット柄を最背面に移動させる

今はドット柄が最前面にいるので、これを最背面に移動させます。

前回もやりましたがもう一度。

　

　

　

これで、テキストと写真の下に移動できました。

ドット柄、完成です。

　

テキストを円形に沿って湾曲させる方法

「Cat & Cafe」を円形に沿って湾曲させます。

テキストを作っておきましょう。

　

　

　

これで湾曲テキストが完成です。

最後にスマホの表示を確認して、問題なければブロークングリットレイアウトのページも完成となります。

　

今回Canvaで崩したレイアウトを作ってみましたが、
なかなかスムーズに作業ができませんでした。
ブロークングリットレイアウトにはアナログな方法や工夫が必要です。