こんにちは！15年以上グラフィックデザインのフィールドで活動してきた私ですが、
最近になってノーコードでWebをデザインから実装までできる世界に飛び込んでみました。
この新しいスキルを習得する過程で、休日を使って色々と勉強してきた経験を皆さんと共有したいと思います。
特に、ノーコードでWebデザイナーを目指す方々にとって効率的なロードマップがまだ少ないと感じたため、
この記事を通して少しでもそのガイドになれば幸いです。
ノーコードでWebデザインを始めるきっかけ
私がグラフィックデザイナーとしてキャリアをスタートしてから、早いもので15年以上が経ちます。
長年にわたり、さまざまなデザインツールや技術の進化を目の当たりにしてきましたが、
最近ノーコードツールによってWebデザインと実装がこれまで以上にアクセスしやすくなったことを知りました。
正直なところ、最初は半信半疑でした。
しかし、この新たなチャレンジに対する好奇心が勝り、休日を利用してノーコードの世界に足を踏み入れることにしました。
私がノーコードでWebデザインを始めるにあたって最初に手を出したのは「Figma」でした。
Figmaはグラフィックデザインのバックグラウンドを持つ人にとっては、特に親しみやすいツールです。
AdobeのIllustratorやInDesignを使った経験がある方なら、
その直感的なUIと機能性に驚くはずです。
特に、オートレイアウト機能は少し複雑に感じるかもしれませんが、
一度慣れればデザイン作業が劇的に効率化されることを実感できるでしょう。
これらの機能により、デザインの概念を素早く形にし、アイデアを即座に試すことができるのです。
しかし、Figmaだけで完結するわけではありません。
実際のところ、FigmaでデザインしたものをWebサイトとして実装するためには、さらなるステップが必要です。
この点については次章で詳しく掘り下げていきますが、
ノーコードの道を歩む上で、Figmaは非常に強力な第一歩となるでしょう。
Figmaがwebデザインツールとして優れているのは、オートレイアウトはもちろんですが、indesignやillustratorでいうところの「スタイル」に似た機能があったり、グリッドを作る時かなり便利に作成できることです。
またアイコンや写真など、webデザインをする際に必要な要素を自分で準備しなくても、
プラグイン等を通してすぐに使用できることも大きなメリットだと思います。
もちろんデザインのみで考えればindesign等の方がやりやすいかもしれませんが、
一度柔軟な気持ちでFigmaを試してみると、思ったより手に馴染むと思います。
デザインから実装への橋渡し
Figmaでのデザイン作業がある程度完成した後、実際にWebサイトとして機能させるためには、
いくつかのノーコードツールを利用して実装のプロセスを経る必要があります。
ここでは、特に日本での人気が高い「Studio」と、グローバルに広く使われている「Webflow」に焦点を当ててみましょう。
Figmaでのデザインはあくまで一部分です。実装に移るためには、
「Studio」や「Webflow」といったツールを使って、デザインをWebサイトとして機能させる必要があります。
これらはノーコードでWebサイトを構築するためのプラットフォームであり、
デザインを直接インポートし、動的なウェブサイトに変換する機能を提供しています。
Figmaからこれらのツールへの移行は、デザインを実際のWebサイトとして実装するための重要な橋渡しとなります。
日本では「Studio」が特に人気を集めています。
その理由の一つは、Studioが日本産のサービスであるため、日本語によるサポートや情報が豊富に存在する点です。
また、Studioのユーザーインターフェースは直感的で理解しやすい設計になっており、
初心者でも比較的短期間で慣れることができます。
これらの特性は、ノーコードでWebデザインを始めたいと考えているグラフィックデザイナーにとって、
大きな魅力となるでしょう。
しかし、Studioの利用にはいくつかの注意点があります。
特に、Webサイトを実装する際に必要なデータの移行や、将来的な運用の柔軟性に関して、
いくつかの制約があることを理解しておく必要があります。
これらの点については、後述の章で詳しく触れていきます。
ノーコード選択の落とし穴
ノーコードツールによるWebデザインと実装は、
技術的なスキルがない人でも美しいウェブサイトを作成できる革新的な方法です。
しかし、このプロセスにはいくつかの落とし穴があり、
特に長期的な視点でのウェブサイト運用を考えた場合、注意が必要です。
（あくまで2024年2月現在のお話です。今後のアップデートで変更させる可能性は十分にあります）
Studioを使用する際に直面する可能性がある一つの大きな問題は、
既存のコンテンツやデータを新しいサイトに移行する際の柔軟性の欠如です。
例えば、WordPressで運用しているウェブサイトからStudioを使ってサイトをリニューアルした場合、
既存の記事やコンテンツをStudioにインポートし、新しいサイトで利用することは可能です。
しかし、この移行は一方通行であり、Studioで作成されたサイトは、
Studioのプラットフォーム内でのみ運用する必要があります。
つまり、もしStudioを離れることになった場合、再び全てのコンテンツを別のシステムへ移行する必要があります。
また、使い慣れたwordPressでの執筆や、このブログでも使われているsangoのデザインで見出しを入れたり、
吹き出しを入れたりということはできない、もしくは面倒な手順が必要になってしまいます。
このように、ノーコードツールを使用する際は、将来的なプラットフォームの変更やサービスの終了など、
外部環境の変化に強く依存するリスクが伴います。
特に新しいまたはニッチなサービスの場合、10年、20年と長期にわたってサポートが続く保証はありません。
また、クライアントに環境の変更を強要することは、営業上のデメリットにもなり得ます。
さらに、ノーコードで実装が可能であっても、特定のカスタマイズや機能追加が制限される場合があり、
これは長期的に見た場合、サイトの成長や進化に制約を与えかねません。
ノーコードでコストが安い、早いからと言って、これらのデメリットを受け入れてくれる営業先はそこまで多くないのでは、
と私は考えています。
グラフィックデザイナがwebデザインを始めるのであれば、ほぼ新規開拓になると思います。
その時に既存の環境は捨てて、安く早く作るのでstudioを使ってください！（月々の費用ももちろん発生します）と、
二重に売り込むというのはあまり得策でもないと思います。
Webflowでの解決策と学び
ノーコードツールの使用における問題点を克服するために、私はWebflowへの学習を決意しました。
Webflowは、より柔軟なウェブサイトの構築と運用を可能にし、
長期的な視点でのデザインと実装の課題に対応する機能を提供しています。
（別にwebflowの回しものではございませんが、現環境を考えるとwebflowの一択のように思います）
Studioを使用する際に直面した問題点に対する解決策としてWebflowを選んだ理由は、
その高い柔軟性と拡張性にあります。
Webflowは、デザインを直接HTML、CSS、JavaScriptに変換し、カスタムコーディングをサポートしているため、
デザイナーがコーディング知識を持たなくても、プロフェッショナルレベルのウェブサイトを構築できます。
また、Webflowは、デザインをWordPressのテーマとして出力することも可能で、
これにより既存のWordPressサイトに新たなデザインを適用することができるのです。
もちろんHTMLベースの構築ができるため、SEO対策についてもstudio以上と考えられています。
簡単にいうと検索された時、そのサイトが検索の上位にでるかどうか、という対策です。
これが弱いと人から見られる可能性が極端に下がりますので、
せっかくサイトデザインをリニューアルしたところで、無意味な経費となってしまいます。
デザイン以上にSEOが大事なのは言うまでもありません。
ちなみに今回触れなかったWIXはSEO対策上、あまりよろしくないのと、デザインも柔軟性が弱いので除外しています。
Webflowの大きなメリットの一つは、WordPressとの連携の容易さです。
Webflowでは、デザインしたページをWordPressのテーマとしてエクスポートすることが可能で、
これによりデザインの自由度が高く、かつ既存のコンテンツ管理システム（CMS）を活用したサイト運用が実現します。
さらに、Webflowには専用サーバーがありますが、既に持っているレンタルサーバーにデータをアップロードし、
同じサーバーで運用することも可能です。
このような柔軟性は、長期的なウェブサイトの運用や、将来的なプラットフォームの変更にも対応できるため、
クライアントにとっても安心感を提供します。
つまり、webデザインの新参者が営業先にアピールするには
「安いし、早いです。しかも今の環境のまま使えるので、ご安心ください！デザイン費用だけもらえれば、運用コストも今のままです。（レンタルサーバやドメイン代など）」
と、かなり敷居を下げた状態で営業ができるという大きすぎるメリットがあります。
デザインの視点から見たWebデザイン
ここまではノーコードデザインのシステム面でのお話となってしまい、グラフィックデザインとwebデザインの違いについて触れていなかったのですが、ここからがデザイン面でのお話となります。
正直、グラフィックデザイナーは確実に簡単にwebデザインできるので、そこは心配無用です。
今まで紙という制約の中でデザインしてきたものが、下方向には伸ばし放題、場合によっては左右も使えます、
となるので、基本的にはむしろやりやすくなる、という部分もあります。
（面倒な文字詰めからも解放されます！）
この章では一つだけ大きな違いのある、レスポンシブデザインについて書いています。
Webデザインにおける最も基本的かつ重要な考慮事項の一つが、レスポンシブデザインです。
レスポンシブデザインとは、さまざまなデバイスや画面サイズに対応して、
ウェブサイトが適切に表示されるようにするデザイン手法です。
この手法は、現代のWebでは不可欠であり、デザインの幅を狭めるとも言えますが、
同時に、あらゆるユーザーに対して最適な体験を提供するためのチャレンジでもあります。
デザインは、左右に伸縮しても違和感のないように、
また、さまざまなデバイスで一貫性のあるユーザー体験を提供できるように慎重に計画される必要があります。
グラフィックデザイナーがWebデザインにおいて直面するもう一つの課題は、
ウェブ固有のデザイン要素、例えば余白、フォントの使用、色の使い方、ユーザーインタラクションなどの最適化です。
これらは、グラフィックデザインとは異なる考慮が必要とされる場合があります。
しかし、グラフィックデザインの原則とWebデザインの要件を融合させることで、
魅力的で機能的なウェブサイトを作成することが可能です。
グラフィックデザイナーは、既存のテンプレートやデザインパターンを学ぶことで、
Webデザインの基礎を素早く習得し、独自の創造性を加えることができます。
まとめ
どちらかというとシステム面での話がメインとなってしまいましたが、
結論としては今ならグラフィックデザイナーでもwebデザイナーに簡単に転職可能、ということです。
正直ノーコードが叫ばれていますが、最低限のhtmlやcssの知識はあった方が、
webflowもstudioも特にスムーズに機能が頭に入ってきます。
そんなに難しい概念ではないので、簡単に学んでおくことをおすすめします。
いずれにせよ、illustrator、indesign等のソフトを日頃使用しているグラフィックデザイナーには、
おそろしく簡単な部類のソフトに感じられると思います。
かなりお得な状態なので、もし興味があれば是非学んでみてください！
それではどうもありがとうございました。
