はじめに

「情シスナビのアイキャッチ、なんか地味じゃない？」と感じたことがある方も多いのではないでしょうか？このサイトを訪れる人々が最初に目にする部分、それがアイキャッチです。会社のブログや技術記事を書いている方々の中には、アイキャッチのデザインに悩んでいる方もいるかも？と思い今回の記事を書いてみました！！

アイキャッチの目的ってなんだっけ？

アイキャッチの目的は、その名の通り読者の「目」をキャッチすることです（そのまま）。しかし、パターン化して目立たないデザインでは、その役割を果たすことができません。視覚的に目立たせることで、パッと一瞬で読者の興味を引くアイキャッチが必要です。

そこで今回は、情シスナビのアイキャッチをより色鮮やかで目を引くものにするために、誰でも簡単に「それっぽい」アイキャッチを作成する方法を共有したいと思います。特に、技術的な質問や記事に合わせたアイキャッチの作り方についても取り上げます。これにより技術的な内容も視覚的に引き立て、読者の興味をしっかりと引くことができるようになります。

この記事を通じて、手軽に魅力的なアイキャッチを作り、皆さんのブログや記事を一段と引き立てるお手伝いができれば幸いです！

作り方 パターン１

作り方 パターン１では過去に私が作成した「【初心者向け】VSCodeのおすすめ拡張機能！！」の記事のアイキャッチを参考に、どのような手順でアイキャッチを作成したのか紹介します！

背景の作成

まず、背景を用意するために「F」キーを押してフレームツールを選択し、1200×720のフレームを作成します。フレームは作業エリア（アートボード）のようなもので、デザイン全体を管理する基盤になります。

フレームを選択した状態で、右側のプロパティパネルから「Fill」セクションを探し、薄い灰色の背景色を設定します。Figmaではカラーパレットをカスタマイズできるため、クリックして色を変更してください。今回は「#C2C2C2」にします。

VSCodeアイコンの作成

次に、VSCodeのアイコンを模したデザインを作成します。著作権に配慮するため、VSCodeの公式アイコンを直接使用するのではなく、図形ツールを使って近いデザインを作ります。Figmaでは、図形ツール（ショートカット「R」キーで四角形、または「O」キーで楕円形）を使って基本形を作成し、これを編集して独自の形を作っていきます。また作成した図形の頂点をダブルクリックすると「ベクターモード」に入り、ポイント（頂点）をクリック＆ドラッグすることで自由に形状を調整できます。

今回は３つの四角形を組み合わせ、ベクターモードで頂点を操作することでvscodeのアイコンを再現しました。色は各図形ごとに設定しています。

見よう見まねで作ってみましたが、意外とそれっぽくなります。オリジナルのアイコンは図形の角が丸くなっていますが、今回は「素早さ」を重視して細かい部分は拘らないことにします。

テキスト枠の作成

タイトルを載せるためのテキスト枠を作成します。まず、図形ツールを使って四角の図形を描き、角を丸くするにはプロパティパネルの「Corner Radius」を調整します。

次に、この図形を少し透明にして背景と調和させるため、「Opacity（不透明度）」スライダーを使用して透明度を下げます。一般的には、背景が目立ちすぎず、テキストが読みやすい50〜70%程度の透明度が適しています。

今回は白背景に透明度は50%を設定しました。

タイトルテキストの追加

最後に、タイトルのテキストを追加します。ショートカット「T」キーでテキストツールを選択し、図形の上にテキストボックスを作成します。

Figmaのプロパティパネルからフォントのスタイル、サイズを調整し枠に収まるようにします。今回はテキストの太さは「Extra Bold」に、フォントサイズは100としました。

最後に各テキストに色を設定します。テキストをドラッグ&ドロップで選択した状態で「Fill」から色を選択することができます。

各テキストの色、図形の大きさなどを調整し、、、、、

完成です！

VSCodeのアイコン作成部分が少し面倒ではあるものの、「それっぽいアイキャッチ」が作れたのではないかと思います！

作り方 パターン2

作り方 パターン２でも同様に過去に私が作成した「Gradioをはじめよう」の記事のアイキャッチを参考にアイキャッチの作成手順を紹介します！

このアイキャッチの特徴は、GradioのサンプルUIが表示され、視覚的にそのツールの概要を伝えられること、そしてタイトル枠にグラデーションが使用されていることです！

他のパターンも取り入れることで、より多様なデザインが可能です。ここでは、GradioというUI作成ライブラリの入門記事用のアイキャッチ作成手順を解説します。

背景の作成

先ほどと同様にフレームを用意します。今回はFillは白に設定しています。

UIのスクリーンショットを撮影

まず、Gradioで作成したサンプルUIのスクリーンショットを撮影します。これにより、アイキャッチに実際のUIが写ることで、読者に「UI作成ツールである」という印象を強く与えることができます。

スクリーンショットの配置

Figma上で撮影したスクリーンショットを適切にトリミングし、フレームに配置します。背景を少し角度をつけて並べることで、動きのあるレイアウトにすることができます。

画像を斜めにする際は、画像のコーナーを選択することで可能になります。

タイトル枠の作成

次にこちらも先ほどのVSCodeの時と同様に、タイトル用のテキストボックスを作成します。まず、四角形の図形を描くために「R」キーを押して四角形ツールを選択し、キャンバス上にドラッグして図形を作成します。図形を選択した状態で、右側のプロパティパネルから「Corner Radius」を調整し、角を丸くします。

次に、グラデーションを追加してタイトルが見やすくなるようにしましょう。プロパティパネルの「Fill」セクションで色を設定するときに「Solid」をクリックし、「Linear Gradient」を選択します。色をクリックするとカラーピッカーが表示され、色の微調整も簡単に行えます。

今回はGradioのイメージを伝えるため、オレンジとイエローのグラデーションを採用しました。

テキストの追加

最後にテキストツールを使用して、タイトル「Gradioを始めよう」を入力します。

今回はフォントの太さを「Extra Bold」に、サイズを「90」にして、、、、、

完成です！

シンプルかつGradioのイメージを伝えられそうなアイキャッチに仕上がったのではないかと思います！

まとめ

今回はアイキャッチの作り方について紹介しました！

少ないデザインテクニックでも、工夫次第で多様なアイキャッチを作成し、サイト全体を色鮮やかに彩ることができます！！最初はFigmaの操作に戸惑うこともあるかと思いますが、その時は他の方の記事などを参考にしてみてください！

それでは良いエンジニアライフを！