この記事を読むのに必要な時間は約 7 分です。
こんにちは、トッドです。
ブログの中でアイコンを使った装飾を考えたとき、FontAwesomeやicomoonあたりが無難な選択肢にあるかと思います。
それも良いですが、個性のあるページにしたいなぁ〜って考えたときに、自作したアイコンを使用するパターンもあるんですよ。
今回は、Webブラウザ上で作業ができるデザインツールFigmaを使ったアイコン素材の制作から、WordPressで運営するサイトでの実装までの流れについて紹介したいと思います。
Figmaの使い方に慣れる為に簡単なアイコンを作ってみよう
今回は、例として「ハート」アイコンを作りながらFigmaの操作の一部に触れながら進めていこうと思います。
Figmaの公式ページからアカウントを取得するとこのような画面へと誘われます。
この画面から作業を始められるので、まずは描画する対象を納めるフレームを用意します。
画面上部のツールバーからFrameを選択すると、サイドバー(右側)にサイズのテンプレートが表示されます。今回は、サイズを変更して利用するので好きなものを選択してください。下記の画像ではmac(1280x720px)を選択しています。
フレームのサイズはサイドバーから変更することができるので、とりあえず100×100のフレームを使ってアイコンを作成していきたいと思います。
このまま描画を始めても良いですが、ガイドラインを表示させながら作業を行いたいと思う方もいるでしょう。
そんなときは、サイドバーにあるLayout Gridを追加すると表示されます。
初期値は10×10のグリッド表示です。
サイズが変更でき、色の変更も可能です。
それでは、ハートを描画していきましょう。
上部のツールバーからEllipse(円型)を選択して任意の場所でクリックすると描写されます。
同じようにもう一つ横に並べます。
サイドバーからStrokeを追加すると画像と同じような状態になります。
ストロークの詳細はサイドバーStrokeの箇所から調整でき、色・太さ・ストロークの位置「外側・中央・内側」から選べます。
ストロークの位置を中央にするとノードの重なる部分と良い感じになり編集しやすくなります。
ストロークの太さも重要ですね。
Strokeの所にある、丸3つのところをクリックするとノードの状態を変更できます。
Roundを選択するとパスの両端が角丸の状態となり個人的に好みです。
ノードの編集は描画アイテムをダブルクリックで行えます。
今回は半円形にしたいので4つあるノードのうち下に位置するものを選択し削除します。
もう片方も同じように消しちゃいましょう。
ハートが見えてきましたね。
ここからは感覚です。
同じようにノードの編集状態にして新たなパスを描写していきます。
ハートの全体像をイメージしながらがコツです。
反対側も同じようにしたら、あとはパスを良い感じに曲げます。
直感でいけます。
ハートが出来あがりました。
あとは仕上げですね。
パスのアウトライン化です。これをやっておかないと拡大・縮小をしたときに思ったのと違う状態になってしまいます。
今、ハートは真っ二つです。
ハートを形成している二つのアイテムを選択した状態で左クリックするとメニューが登場します。
その中からFlattenを選択し１つにします。
そのあとにもう一度、左クリックを押して今度はOutline Strokeを選択します。
これでアウトライン化ができ、ハートアイコン素材は完成です。
あとは背景透過です。
これはフレームの背景色を除去するだけ大丈夫です。
最後にサイドバーからExportを選択し、出力形式をSVGにします。
そして、Previewを確認して背景透過の状態を目視で確認。
最後にExportで完了です。
WordPressで作成したアイコンを使ってみよう
さぁ、ここまででSVG形式の自作アイコンが手元にあると思います。
今回は、WordPress内でメディア(画像)として使ってみましょう。
通常、WordPressにて画像を利用する場合には事前にファイルをアップロードしておく必要がありますよね？。
しかしながらWordPressの仕様上、SVG形式のファイルのアップロードは対応していないのでそのままでは使うことができません。
ということでプラグインを使って、その問題を解決していきます。
お世話になるプラグインは「Safe SVG」というやつで、プラグインをインストールしましたら有効化を行います。
設定とかはありません。
これでSVG形式のアイテムをアップロードすることが出来るようになります。後は、記事内もしくはstyle sheetなどでimgタグを用いて普段、画像を添付するとき同様の方法で利用することができます。
今回、サンプルで作成しました「ハート」アイコンは以下のように表示されます。↓
色などはimgタグを使って利用しているのでアイコン作成の段階で決め込んでおく必要がありますね。
アイコンの大小に関しましては、CSSあるいはimgタグ内にwidth & heightで調整することが出来るので一連の方法を試してみてください。
最後まで読んでいただきありがとうございました。
