これからWebデザインやWeb制作を始めてみたい方向けに、WebデザインやWeb制作に役立つおすすめのツールをご紹介します。今回ご紹介するツールは、どれもAI機能が魅力のひとつになっています。
Figma
Figmaはブラウザ上でデザインを作成できるクラウドベースのツールです。ソフトをインストールする必要がないので、ネットが使える環境ならどこでもアクセスして利用することができます。WebデザインやUI/UXデザインのプロトタイピング、アイコン制作、イラスト制作など幅広い用途に対応しています。一部の機能は有料プランでないと利用できませんが、無料プランでもデザインに必要な基本的な機能は使えるので、初心者の方や個人利用、小規模なプロジェクトなら無料プランで十分だと言えます。
Figmaの特徴
複数人での共有・編集が可能
チームメンバーでプロジェクトを共有し、リアルタイムで共同編集することが可能です。コメント機能を使ってデザイン内にコメントを残すことができるので、画面上でフィードバックの確認をしながら修正作業などを進められます。
コンポーネント機能
コンポーネント(Component)とは、デザインの中で再利用する要素のことです。例えば、ボタンや記事カードのデザインなど、サイト内で統一させる要素って多いですよね。そういう、デザイン内で何度も使うパーツをコンポーネントとして作成すれば、複数の場所で再利用することが可能になります。
Figmaにおいて、元となるコンポーネントをメインコンポーネント、コンポーネントから作成されたコピーをインスタンスと呼びます。メインコンポーネントを変更すれば全てのインスタンスに変更が反映されるので、かなり便利な機能です。統一感のあるデザインの作成やデザインの管理が楽になります。
プラグインが充実
Figmaのプラグインは世界中のデザイナーや開発者によって公開・提供されています。無料で利用できるものも多いので、プラグインを利用すれば作業を効率化することができます。
例えば、高品質なフリー画像サイトの「Unsplash」のプラグインがあり、このプラグインを導入すればFigma内でUnsplashの画像を検索して挿入することができるようになります。オープンソースのアイコンを無料で利用できる「Iconify」や、画像の背景を削除してくれる「Remove BG」など、便利なプラグインがたくさんあります。
開発モード
開発モードは有料プランで利用可能な機能で、デザインをコードに変換する作業を効率化するのに役立ちます。デザイン要素からCSSやiOS/Android向けのコードを自動生成できるため、デザインから開発への移行がスムーズになります。また、コーディングに不慣れな方でも、この機能を使えば簡単にコード化が可能です。
さらに、開発モードではデザイナーと開発者がリアルタイムでコミュニケーションをとれる機能が充実しており、コメント機能やデザインレビューを通じて迅速なフィードバックが可能です。プラグインを組み合わせることで、デザイン仕様書の作成やアセット管理、コード生成などの機能が一層強化され、チームの連携がよりスムーズになります。
AIにも期待
デザイン作成をAIによって自動化できるFigma AIという機能も実装されています。プロンプトを入力してデザインモックの作成をしたり、テキストや画像の自動生成、文章の修正や翻訳などの機能があります。まだAIで生成されたデザインをそのまま公開というわけにはいかないでしょうが、今後の発展は注目です。2024年まではベータ期間で全ユーザーに無料提供されていたのですが、2025年になって無料プランでは使えなくなったみたいです。残念。
Framer
FramerはノーコードでWeb制作ができるプロトタイピングツールです。ノーコードとは、ソースコードを記述しなくてもアプリやWebの開発ができるサービスのことです。ホスティング機能を備えているので、Framer上でサイトの公開まで行えます。幅広い料金プランが用意されていて、無料プランもありますが、無料プランの場合は独自ドメインが使えないなど制限があります。有料プランでは、独自ドメインの利用や高度なアニメーション機能が追加され、価格は月額$5～となっています。
Figma同様ブラウザ上で使用できるクラウドベースのサービスなので、ネット環境があればどこでも利用可能です。現在、日本語に対応していないのがちょっと使いにくいかもしれません。
Framerの特徴
ノーコードで高品質なWebサイトを作成
プログラミングの知識がなくても、直感的な操作でWebサイトを作成できます。無料・有料のテンプレートやプラグインも豊富にあり、それらを利用すれば作業はより効率化できます。
スクロールアニメーションやホバー時のエフェクトなどもエディタ上で設定でき、コードを書かなくてもインタラクティブなサイトを簡単に作成できちゃいます。
レスポンシブ対応も簡単
Framerはデフォルトでレスポンシブデザインに対応しており、ブレークポイントを追加してタブレットやスマホでのデザインを確認・設定することが可能です。PCのデザインをベースにして自動的にタブレットやスマホをレスポンシブに対応させつつ、各ブレークポイントにのみ設定を反映させることもできます。デザインを触りながら各ブレークポイントでの見え方や挙動を横並びで確認できるので、とてもわかりやすいです。
Figmaとの連携が可能
FramerはFigmaで作成したデザインをインポートすることが可能です。FramerとFigmaは操作感やUIが似ており、FramerにもFigmaのオートレイアウトやコンポーネントと同じような機能があります。Figmaに慣れている方ならとっつきやすいでしょう。
FramerでもWebデザインが作れますが、Figmaの方がデザインに特化しているので、Figmaでデザインを作成してそれを元にFramerの強みであるアニメーションなどを使ったインタラクティブなWebサイトを作成・公開する、といった使い分けができます。
AIによる自動生成デザイン
簡単なプロンプトを入力するだけでAIによるデザインを自動生成することも可能です。場所がちょっとわかりにくかったですが、左上のマークをクリックしてメニューを開き、「File」→「Generate Page…」でプロンプト入力ウィンドウがポップアップしました。
適当にプロンプトを入力して生成されたデザインがこちらです。
日本語で入力したせいなのか、ぶっちゃけ入力したイメージとは全然違うデザインが生成されました(笑)。でも、簡単な文章を入力しただけでこれだけページを生成してくれるのはすごいと思います。カラーパレットやフォントは右側のパネルから変更できます。
生成されたものをそのまま公開は現状厳しいと思いますが、デザインを考えていく上での参考にしたり、これをベースにブラッシュアップしていくなど、活用の仕方はありそうです。この機能が更に進化して、AIが生成したページをほとんどそのまま公開できちゃう日が来そうですね。
Canva
TVでCMも流れているのでご存知の方は多いと思いますが、Canvaはオンラインで使えるグラフィックデザインツールです。有料・無料含めて豊富なテンプレートやグラフィック素材があり、ドラッグ&ドロップで簡単にデザインを作成できます。なないろもアイキャッチ画像の制作によく利用しています。SNS投稿画像やポスターやチラシ、ロゴ制作、名刺、プレゼン資料など、幅広い制作物に利用できるツールです。
Canvaの特徴
無料で利用できる
グラフィックツールで有名なのはPhotoshopですが、Photoshopは無料では利用できません。それなりのお値段します。これからデザインを始めてみたい初心者の方や、デザインの仕事をされていない個人の方にはちょっと利用のハードルが高いですよね。
Canvaは基本的な機能は無料で利用でき、ブログのアイキャッチやSNS用の画像などを作成する分には十分な機能を備えています。
有料プランにすると更に便利な機能やハイクオリティな素材などを使えるようになります。価格もPhotoshopよりはお手頃です。ですが、より高機能なツールで自由なデザインをしたい場合にはプロ向けのPhotoshopがおすすめなので、予算と使用目的に合わせて選ぶのが良いと思います。Canvaは無料でさくっと簡単にデザインできるので、ブロガーやSNSユーザーが手軽に使うツールとしてはとてもおすすめです。
素材やテンプレートが豊富
Canvaには1億を超える写真素材・イラスト素材と、何十万もの高クオリティなテンプレートがあります。無料プランの場合は一部しか使えませんが、それでも十分な量が揃っています。素材やテンプレートを組み合わせることで誰でも簡単にデザインを作成することが可能ですし、プロのクリエイターが手掛けたテンプレートを使えばクオリティの高いデザインが手軽にできるので、時短にもなります。一部の素材はパーツの色を変更できるのも使いやすいです。Webサイトのテンプレートもたくさんあり、レスポンシブにも対応しています。
無料素材だけの検索ができないのが難点ですね。
AI機能も豊富
無料プランだと利用制限がありますが、CanvaにはAIを活用した機能が複数あります。画像生成や文章作成、音楽生成、翻訳、デザイン加工など、色々用意されています。SNS投稿用の画像やテキストを時間をかけずにサクッと作りたい時や、アイディアに困った時に使ってみると便利です。写真に写り込んだ不要物を除去したり、写真の特定部分を変更(例：背景の青空を夜空に変更)することも可能です。
Khroma
KhromaはAIが自分好みのカラーパレットを提案してくれる無料ツールです。好みの色を学習し、それに基づいた配色を生成する独自のアルゴリズムを採用しています。他の類似ツールより直感的に最適な配色を見つけることができます。Webサイトだけでなく、配色に悩んだときに便利で、Webサイトやロゴ、バナー制作などに活用できます。
Khromaの特徴
AIによるカラーパレットの提案
Khromaの使い方は簡単で、サイトに表示されるカラーサンプルから好きな色を50色選択します。すると、AIがあなたの好みを学習して、それを元に配色パターンを大量に提案してくれます。
アクセシビリティに配慮したい場合は、Web Content Accessibility Guidelines (WCAG)のコントラスト比を満たさないパレットを除外することが可能です。バイアスの調整もできて、バイアスが低いほど提案される色の幅が広くなります。
最初に50色を選択する際には、様々な色相や彩度から選ぶのがおすすめです。
様々な表示スタイルで配色パターンを確認できる
Khromaが提案するカラーパレットの表示スタイルは5種類あります。タイポグラフィ、ポスター、グラデーション、イメージ、パレットです。どのスタイルでもカラーコードやRGB値を確認してコピーするこができます。
タイポグラフィはテキストのコントラスト比が確認しやすいですね。グラデーションは2色のグラデーションになります。イメージのデフォルトはパイナップル画像ですが、自分で画像をアップロードして配色を確認することも可能です。パレットは4色の組み合わせなので、Webサイトの配色を決めるのに使いやすいです。気に入った配色はお気に入りに保存しておくことが可能です。
ChatGPT
生成AIの代表格であるChatGPTはWeb制作でも有用です。使っているとわかると思いますが、100%信頼できるわけではありませんので、都度確認などは必要です。平気で嘘つきます。ですが便利です。コーディングに特化した生成AIなどもあるのですが、ChatGPTは様々な場面で活用でき、無料で始められるので便利だと思います。MicrosoftのCopilotもアリですが、なないろはChatGPTの方が良かったです。Copilotはなんか…頑固でした…！
ChatGPTの活用方法
コーディングに役立つ
Webサイトにこういう機能を実装したいけどコードがわからない！なんて時や、自分で書いたコードが上手く動かない！なんて時にChatGPTに聞くとコードを書き出してくれたり、間違ってる個所を教えてくれたりします。初心者の方やコーディングが苦手な方にとって、補助的に使えると思います。ChatGPTの答えから自分の知らなかった新しいプロパティや別の実装方法に知る機会にもなります。常にアンテナを張って新しい情報を収集している方はそんなことないかもしれませんが、自分が使っていた手法がいつの間にか古かった、なんて気づきになることもありました。
アイディア出しや推敲に使える
どんなサイトを作るか、どんなキーワードを使うか、どんなネタで記事を書くかなど、サイト制作において考えるという作業は多いです。そういう時にもChatGPTが使えます。アイディアやネタを出してもらったり、ヒントをもらったり、草案を作ってもらうこともできます。自分が作った記事や原稿を推敲してもらってブラッシュアップさせることもできます。サイト運営・更新していく上で、ChatGPTは長期的に活用することができます。
おわりに
今回紹介したツールは初心者でも扱いやすく、AI機能を活用することで作業効率を向上させることができます。これらのAI機能がより進化したらWeb制作やデザインはもっと効率的で簡単になりますね。ぜひ、自分に合ったツールを試してみてください！
