makeinfo の使い方

テンプレートから始めます

白紙から始めると、最初のブロックをどこに置くかで手が止まります。ツールバーのテンプレートから近い形を選び、中身だけ入れ替えるほうが速いです。

テンプレートは配置と色がすでに整っています。要らないブロックは消して必要なものだけ残してください。完全にゼロから作りたいときはブロックをすべて消して白紙にを使います。

ブロックを積んで作ります

makeinfo の画面はブロックでできています。左の一覧から必要なものを押して追加します。

ブロックは自由に動かせます。一覧で順番を変えたり、フォルダにまとめて関係するもの同士を整理することもできます。まとめておくと、親を動かせば中のブロックも一緒に動きます。

行を揃える — 目分量でやらない

ページが素人くさく見える一番よくある原因は、ブロックの左端が数ピクセルずつずれていることです。近くで見ると気づきにくいのに、全体を見ると散らかって見えます。

道具が2つあります。

• スナップ — キャンバスの格子や他のブロックの角に磁石のように吸い付きます。近くまで運べば勝手に揃います。
• ブロックにくっつける — 他のブロックの四辺に置くと整列します。左右に置けば同じ行に並んで行の幅を均等に分け合い、上下に置けば同じ列に縦に並んで x 座標と幅を受け継ぎます。端の近くでしか効かないので、ブロックの真ん中を通っても何も起きません。

細かく動かしたいときは、ブロックを選んで矢印キーを使います。1回で1px 動きます。

ひとつのブロックだけ調整する

右の設定パネルは、選んだブロックだけに効きます。

• 内容の大きさ — そのブロックの文字と余白をまとめて拡大・縮小します。文字だけ大きくすると余白が相対的に狭く見えて窮屈になるので、二つを一緒に動かします。
• パーツごとの大きさ — 商品名だけ大きくして価格はそのまま、というようにブロックの中の要素ごとに決めます。
• 自由変形 — 有効にすると、中身が絵のように伸び縮みします。枠を縮めれば中の文字も一緒に小さくなります。PowerPoint や Photoshop の自由変形と同じ動きです。

サイズ変更のハンドルは文字の倍率を変えません。ハンドルで縮めると中身はそのままで枠だけ小さくなるので、中身より小さくすると切れます。中身ごと縮めたいときに使うのが自由変形です。写真の入ったブロックなら、写真の比率を枠に合わせるにする方法もあります — ブロックの高さに合わせて写真だけが縮み、文字は元の大きさを保ちます。

色と書体はテーマでまとめて

ブロックごとに色を選んでいると、あとで全体の雰囲気を変えるときに全部やり直すことになります。スタイルタブのテーマで基準の色と書体を決めておけば、すべてのブロックがそれに従います。

特定のブロックだけ変えたいときはこのブロックだけ調整で例外を作ります。基本はテーマに従い、例外は最小限にしておくほうが、あとで色を変えるとき楽です。

自分でアップロードした書体も使えます。書き出すときに、使った文字に必要な分だけがファイルに一緒に入るので、別の PC で開いても書体が変わりません。

タイトルスタジオ

見出しの文字にグラデーション、縁取り、影を入れ、行ごとに書体を変えるとなると、調整する項目が多くなります。そのためタイトルブロックは全画面で開きます。

ここで作った見出しは文字のまま残るので、あとで文言を直せます。用意されたスタイルから始めて色だけ変えるのが手早いです。

キーボード

元に戻すは操作のまとまりで区切られます。ドラッグ1回が1段階で、入力も文単位でまとまるため、1文字ずつ戻ることはありません。

保存は自動、ただしこのブラウザの中だけ

作業は自動で保存され、次に開くと最後のプロジェクトがそのまま復元されます。保存ボタンを押す必要はありません。

大事なのはどこに保存されるかです — このブラウザの中です。サーバーには上がりません。ですから次の場合、作業は消えます。

• ブラウザの閲覧履歴・サイトデータを消したとき
• シークレットウィンドウで作業してウィンドウを閉じたとき
• 別の PC や別のブラウザで開いたとき（そもそも表示されません）

ですから作業が終わったら全体 PNG で一度書き出しておいてください。そのファイルがそのまま作業ファイルです。別の PC へ移すときも、そのファイル1つを持っていけば済みます。

書き出しは4種類

ひとつ覚えておくこと — アップロードするファイルと、保管するファイルは別ものです。分割 PNG を上げたなら、全体 PNG を別に残しておいてください。

読み込みはドラッグして置くだけです。全体 PNG や作業ファイルの zip ならプロジェクトごと復元され、ただの画像なら画像ブロックとして置かれ、PSD ならレイヤーごとにブロックになります。

絵が必要なときは

簡単な絵や写真の補正が必要なときは、左下の描画エディターを開きます。新しいタブで描いてそのまま画像ブロックとして持ち込めるので、別のソフトを行き来する必要がありません。