WordPressで統計データや複雑な概念を説明する際に役立つ図形。
ビジュアルで伝えられる図形を用いることで、読者の理解を深める効果があります。しかし、図形の作成に不慣れな人からすると、具体的な作成方法やWordPressへ挿入する手順が分からないものです。
そこで本記事では、WordPressに図形を挿入する方法や、整った図形を作成するコツを紹介します。
WordPressの図形の挿入は「画像形式」が一般的
WordPressに図形を挿入する際は、以下の流れで行うのが一般的です。
- 図形を作成
- 画像ファイル形式でエクスポート
- エクスポートした図形をWordPressに挿入
ポイントは画像ファイル形式にすること。
画像ファイル形式とは「PNG」や「JPEG」などのファイル形式です。PNGは背景を透過させられるので、WordPressの背景色に図形を馴染ませることができます。
JPEGは透過ができないものの、PNGよりもファイルサイズが軽いメリットがあります。例えば、WordPressの背景色が白で、透過させる必要がないのであればJPEGで十分です。
図形をWordPressに挿入する場合は、一度画像のファイル形式に変換してからアップロードするようにしましょう。
図形作成におすすめのサービス3つ
図形作成に役立つサービスを3つ紹介します。
- Canva
- Google 図形描画
- draw.io
全て無料から利用できるので、ぜひ使ってみてください。
Canva
Canva（キャンバ）は、オシャレな図形が作成できるデザインツールです。
豊富なテンプレートや素材が用意されているため、知識のない人でも簡単に図形を作成できます。各パーツの配列を整頓したり、センスの良い配色をワンクリックで適用できるスタイル機能も便利です。
また、図形だけでなく、記事のアイキャッチ画像やバナー、パンフレットなどの作成にも使えます。
WordPress運営に役立つこと間違いなしのデザインツールです。
ブログのアイキャッチ画像やバナーなど、幅広い用途に使える人気ツールのCanva。 無料から使えるCanvaですが、有料版にしたら「こんなに便利だったんだ！」と感じました。しかも、有料版に切り替えたことで、有料画像素材サイトを解約でき、年間1.5万円ほどの節約にもつながったのです。 本記事...
Google 図形描画
Google 図形描画は、無料で使える図形作成ツールです。
Googleアカウントを持っている人なら誰でも使える手軽さがメリット。複数名で図形を編集することも可能。Canvaとは操作性が異なりますが、Google 図形描画ならではの利便性もあります。
機能的には図形作成に必要な最小限の機能が揃っている感じです。
「シンプルなツールで図形を作成したい」という方には、最適なツールと言えるでしょう。
draw.io
draw.ioは、フローチャートや組織図などの作成に役立つ図形作成ツールです。
GoogleドライブやDropbox、OneDriveなどと連携できるため、クラウドストレージへの同期がスムーズに行えます。複雑な図形を作るのが得意で、各種パーツも豊富に揃っています。
完全無料で利用できるのも魅力です。
参考画像にあるような複雑な図形も、テンプレートを読み込んで作成できるため、初心者にもおすすめの図形ツールになっています。
Canvaで図形を作成する方法
ここでは、例としてCanvaで図形を作成する方法について紹介します。
Canvaのトップページを開いたら「カスタムサイズ」を選択して、サイズを入力し「新しいデザインを作成」をクリックしてください。
デザインの作成画面が表示されました。
画面左側にある「素材」をクリックすると「線と図形」という項目があります。
「すべて表示」をクリックすると、下画像のようにパーツが一覧表示されます。使いたいパーツをクリックすると、デザイン画面に挿入可能です。
検索欄にキーワードを入力して検索することもできます。
下の画像はグラフを挿入した時の画面です。
左側の「データ」に数値を入力すると、グラフに反映できます。
画面上部のメニューからは、フォントやグラフのカラーを変更可能です。
テキストを追加する際は、画面左の「テキスト」から挿入できます。
各パーツの配置が完了したら図形の作成は完了です。
ちなみにCanvaには、おしゃれな配色をワンクリックで設定できる「スタイル」機能があります。
ワンクリックで図形のイメージを変更できるので、デザインの参考にしてみてください。
図形が完成したら「共有」→「ダウンロード」の順でクリックしてください。
再度「ダウンロード」をクリックすると、図形をダウンロードできます。
ダウンロードした図形は、WordPressに画像をアップするのと同じ要領で設置すればOKです。
整った図形を作成する3つのコツ
整った図形を作成するには、以下3つのコツを意識してみてください。
- カラフルにしすぎない
- できるだけシンプルに作る
- スペースを均等に配置する
カラフルにしすぎない
デザインスキルがない人が整った図形を作るには、色を3色以内に制限するのがおすすめです。
以下は悪い例です。
配色にまとまりがなく、統一感が感じられません。
下の画像は全体で3色以内にまとめた例になります。
3色に絞ったことで、全体的な統一感が出ました。
色を制限することで、図形がシンプルかつ整然と見える効果があります。特に複雑な図形を作成する場合、何色も使うと統一感がなくなってしまうのです。
読者からしても分かりにくい図形になってしまうでしょう。
通常、使う色が増えるほど、デザインの難易度も上がります。
モノクロの図形は味気はないものの、整って見えるのはそのためです。
まずはメイン、ベース、アクセントカラーの3色で図形を作成してみましょう。
「どんな配色にするべき？」という疑問は、以下の記事が参考になります。
あなたは色を決める時、どのように検討を重ねているでしょうか。そして何を決め手に最終的な配色を決定しますか？この記事では配色を検討する時に便利なツールとなんか垢ぬけない印象の配色となってしまいがちな理由について書いていきます。日々のヒントとして参考にしていただけたら嬉しく思います。 カラ...
できるだけシンプルに作る
シンプルな図形を心がけることも重要です。
図形はツールを使うと簡単に作成できます。そのため、必要以上にパーツやテキストを入れてしまうミスを犯してしまいがちです。この場合、図形を使うメリットである視認性を奪ってしまいかねません。
以下のような図形は、パッと見た時に要素が散らばりすぎて、視認性が下がってしまうことが分かるでしょう。
色使いと同様、シンプルさを意識すると、見た目の整った図形が作れるようになります。
- 図形で伝えたいことを明確にする
- 1つの図形で伝えることを絞る
- 伝えたいことが複数ある場合は個別に図形を作成する
上記のようなポイントを意識して、シンプルな図形を作成するようにしましょう。
スペースを均等に配置する
図形を作成する際は、レイアウトにもこだわりましょう。
例えば、下の画像はスペースが均等でないため、バランスが悪く感じます。
配色のバランスは良くても、スペースが均等でないと、図形のクオリティが下がってしまうのです。
下の画像はスペースを均等に保って作成されています。
各パーツへ均等にスペースを設定すると、視覚的に整った図形を作りやすいです。
図形作成ツールには、紙のノートでいう方眼と同じグリッド線があります。パーツを配置する際は、グリッド線をもとにスペースを均等に保ちましょう。
水平方向や垂直方向のバランスを考慮しつつ、図形に一貫したスペースを設置すると整った図形を作成できます。
WordPressに図形を挿入する時のポイント
WordPressに図形を挿入する時のポイントをまとめました。
- 余白をつけすぎない
- 画像のファイルサイズを最適化する
- 画像にalt属性をつける
余白をつけすぎない
WordPressに挿入する際は、図形の余白をつけすぎないようにしましょう。
下の画像のNG例では、余白をつけすぎて図形が小さく表示されて視認性が下がっていますよね。
特にスマホで表示した際に見にくくなってしまうデメリットがあります。
また、背景色が白の場合、上下左右に余白をつけすぎると、本文と図形の感覚が空きすぎてしまいます。見出しと本文の間隔と同じくらいの余白にしておくのがおすすめです。
余白をつけすぎないように注意して、バランスを取るようにしましょう。
画像のファイルサイズを最適化する
作成した図形をWordPressに挿入する際は、画像のファイルサイズを最適化することも大切です。
図形作成ツールでダウンロードした画像ファイルは、サイズが大きいため、そのままWordPressに挿入すると記事の表示速度が遅くなってしまいます。
記事の表示速度が遅くなると、読者が離脱する原因になるのです。
また、SEO的にも不利とされています。
この問題を解決するには、WordPressのプラグインを利用するのがおすすめです。プラグインを使えば、アップロードした画像を自動で圧縮したり、リサイズしたりできます。
おすすめのプラグインに関しては、以下の記事で詳しく解説しています。
Webサイトの表示速度を上げるには、画像ファイルを圧縮するのが効果的です。 WordPressならプラグインを使うことで、手軽に画像を圧縮できます。しかし、プラグインや画像の種類によって圧縮率が変わるため、最適化するにはちょっとしたコツの習得が必要です。 本記事では、WordPressの...
画像にalt属性をつける
図形の画像ファイルには、alt属性をつけましょう。
alt属性を設定すると以下のようなメリットが得られます。
- 検索エンジンに画像の意味を伝えられる
- 画像検索でヒットしやすくなる
- 画像が表示できない時にalt属性のテキストが表示される
alt属性は検索エンジンに画像の意味を伝える役割を果たします。
Googleの画像検索でヒットしやすくなる効果も期待できるため、SEOの観点からもメリットがあるのです。
また、通信速度が遅く画像が表示されない時も、alt属性に入力したテキストが表示されます。
alt属性はWordPressの投稿画面から設定可能です。
ブロックエディタでは「ALTテキスト（代替テキスト）」からalt属性を設定できます。
クラシックエディタでは、画像の編集ボタンをクリックした際に表示される「代替テキスト」から設定可能です。
適切なalt属性を入力して、図形の意味を検索エンジンに伝えてあげましょう。
alt属性に関する詳しい説明は、以下の記事で解説しています。
ブログ記事を書いていると内容を補足するためや、リンク先のイメージを示すために画像を挿入することがあると思います。 画像を挿入時には、alt属性を正しく活用していますか？意外と見落としているケースも少なくありません。 実は読者にも検索エンジンにも有効で、SEO的にも効果を望めます。というわ...
まとめ
WordPressに図形を挿入するには、以下の方法で行うのがおすすめです。
- ツールで図形を作成
- 画像ファイルに変換
- WordPressにアップロード
図形の作成は、CanvaやGoogle 図形描画、draw.ioなどを使えば簡単にできます。
整った図形を作成するコツは、できるだけシンプルにして伝えたい要素を明確にすることです。各パーツを挿入する際は、スペースを均等にしてバランスを整えることも意識しましょう。
SEO的なデメリットを最小限にするには、画像のファイルサイズやalt属性にも気をつけてください。
適切な図形を作成できるようになれば、記事のクオリティがグンっと上がります。
読者にとって分かりやすい図形を作成して、価値のある記事を作成していきましょう。
コメント