見出し画像

グラフィックデザイナーでも、コードをできるだけ書かずに本格的なWebが制作できる。

V/U/Z/Z

自己紹介

2000年からデザイン業界に入りグラフィックデザイナーとして活動してきました。当時の業務内容はポスターやパンフレット、チラシ、DMなど紙媒体のデザインをIllustratorとPhotoshopで制作するものです。
インターネットがブロードバンド化されはじめた頃なので、まだWebデザイナーという職業はグラフィックデザイナーと比べてメジャーな存在ではなく、コーディングの難しさからWebには手を出さず、グラフィックデザインに没頭しながらデザイン会社や広告代理店で活動していました。
2008年にフリーランスとして独立、2010年には法人化し、現在は8名のスタッフを抱えるデザイン会社を経営しています。

Web制作との出会い

グラフィックデザインの業務を行う中、クライアントから「Webサイトも作ってくれないか？」という相談を受ける事も多く、コーディングの仕方がわからない私は、画面デザインを制作し、指示書を書いて外部のコーダーに依頼するという流れでWeb制作も行ってきました。
手探り状態ではじまったWeb制作は、クライアントが希望する内容や方向性を何度もヒアリングし、見本として選ばれたWebサイトを参考に、外部のコーダーと相談しながら何度も作りながらUIを制作しました。
Web制作の案件が増え出しても、「コーディングはコーダーがするもの」と割り切り、UIデザインに専念して業務を行ってきました。

Web制作の難しさ

デザインとコーディングは別の作業ですが、デザイナーとコーダーは同じ考えを持って制作に取り組む必要があります。
外部のコーダーから仕上がったデータをサーバーにアップしてみると、「思っていたのとは違うな」と感じる事が頻繁にありました。これは、デザインアプリの画面上の仕上がりを完成形だと思ってしまっている私の認識が間違えていた事、コーダーに私の意図を伝えきれていなかった事が原因だと思います。
Web制作を行う上で、デザイナーとコーダーは意識を一つにして完成させるべきWebサイトの構築に取り組む必要がありますが、別の人間が作業するわけであり、完全に思いを一つにする事は難しいものです。
「これなら自分がデザインもコーディングもやった方が良いのではないか？」と考える事もありましたが、コーディングの技術は日々進化しており、去年覚えたコードが今年はもう古くなっている事もしばしばあります。基本的なコーディング知識は身につけましたが、やはり自分はデザインに専念しようと、複雑なコーディングについて学ぶ事はありませんでした。

ノーコードツールの発達

WiXやJimdoなどのブラウザ上で簡単にWebサイトが作れるサービスが登場し、「これならデザインにこだわりながら自分でコーディングができる！」と試してみましたが、どうも性に合いませんでした。枠にはめるだけ、テンプレートから選ぶだけという制作が中心のこれらのサービスでコーディングをするためには、デザインにこだわるというデザイン会社としての使命を真っ当できないからです。WiXやJimdoを利用するデザイン会社もあるかと思いますが、やはりこれではダメだと利用する事はありませんでした。

Elementorとの出会い

そんな中出会ったのがElementorでした。

Elementorは、WordPressにインストールするプラグインで、WiXやJimdoのようにブラウザ上でデザインしながらコーディングを行う事ができるツールです。ここまで聞くと「ではWiXやJimdoでいいのではないか？」と思われるかもしれませんが、最大の特徴はWordPressにインストールするプラグインであるという事です。
CMSとして世界で最大シェアを誇るWordPressには数えきれないほどのプラグインを利用する事ができ、Elementorとその他のプラグインを組み合わせる事で、さまざまな機能を搭載させる事ができます。
また、Elementorは基本的なデザインが制作できるだけでなく、独自のCSSを記述したり、Elementorが保有しているさまざまな機能を工夫する事であらゆるデザインを制作する事ができます。
Elementorはノーコードツールですが、私はローコードツールとして、できる限りコードを書かずに本格的なWebサイトを制作できるシステムとして利用しています。

Elementorで制作できるWebサイト

Elementorは静的サイトと同じようなシンプルなサイトが制作できるのはもちろん、例えば決済システムと連動させてECサイトを制作したり、予約システムを搭載させて顧客に来店してもらう店舗のサイトを制作し、ビジネスの効率化を図る仕組みをクライアントに提供する事ができます。
他にも、オンラインスクールを実現する事もできますし、メールフォームも複雑なコードを書かずに作る事ができます。
WordPressに標準搭載されているブログシステムを利用し、カスタム投稿、カスタムフィールドを工夫すれば、クライアントの手で簡単で間違える事なく記事を追加更新してもらう事もできるようになります。

Elementorはグラフィックデザイナー、UI/UXデザイナーにピッタリのツール

これまでグラフィックデザイナーとして、Macの画面上で美しく使いやすいビジュアル作りをしてきた私のように、Elementorは、Webデザイナーとして活躍したい、でもコーディングは難しくてなかなか良いものが作れないという方にピッタリのツールです。冒頭で説明したように、デザインとコーディングを一人の人が一つの脳で制作する為、「このようなデザインのWebサイトにしたい」という事を負担を最低限して最高の仕上がりで制作する事ができます。
ただし、このようにデザインにこだわりながらElementorでWebサイトを構築するためには、簡単にWebサイトが構築できるノーコードツールとしてElementorを利用するのではなく、自分の考えを完全に実現させる為のローコードツールとして利用する必要があります。複雑なコードを覚える必要はありませんが、Elementorの機能やWordPressの扱い方、基本的なコードなどは覚えていく必要があります。

Elementorを利用し、思い通りの高度なWebサイトが作りたい方へ。

今後こちらのnoteで、Elementorを使ったWebサイト制作について発信していこうと思います。WordPressの扱い方、サーバーの設定方法、Elementorの基本的な機能、Elementorの機能を工夫した高度なテクニックなど、さまざまな情報を発信していきますので、今後も購読よろしくお願いします。

この記事が気に入ったらサポートをしてみませんか？