okaweb vol.61「FigmaとWix Studioで構築するWeb制作」

近年、AIやノーコードツールなどの登場により、多様化しているWeb制作現場ですが、FigmaとWix Studioを用いた新しいWeb制作手法を紹介します。

FigmaはIllustratorやPhotoshopに比べると簡易ツールという印象を持たれがちですが、実際には多くのプロのWeb制作現場で使われています。「Wix Studio」はWixとは異なりプロのWeb制作者を想定して設計された別のプラットフォームです。

Figmaのデザインを“作って終わり"にせず、クライアントワークにつなげるための考え方と、制作スピードと品質を両立するWeb制作のヒントを持ち帰っていただけるイベントです。

FigmaをWebデザインで活用するための機能を学ぼう!

Figmaを使ってデザインはできるけど、「正しく・効率よく」使えているか不安はありませんか?

本セッションでは、オートレイアウト・制約・コンポーネントといったWeb制作に欠かせないFigmaの基本機能を、「なぜ使うのか」「どう組み合わせるのか」という視点で解説します。

Figmaを“ただのデザインツール"で終わらせず、クライアントワークにつながる使い方をイメージできる内容になっております。

濱野 将 (はまの・しょう)

株式会社 IMAKE代表 / UIUXコンサルタント
https://www.image-make.co.jp/

Adobe Community Expert

---

デザイナーとして紙媒体・Webデザイン・動画編集などを行ってきた約20年の実績経験から、多角的な視点でUI/UXを考慮したディレクションや、動画教材のアドバイザーとして活動中。

また、講師として大学や専門学校の講師や動画プラットフォームのコース開設もしており、これまでの受講者は延べ15,000人を超える。

主な実績
・東京工科大学 非常勤講師(UIUXデザイン演習)
・Udemy 動画講師&BOC認定講師(Udemyプロフィール)
・WonderLabo 動画教材講師
・CREATORS COMPLEX 講師&メンター
・大塚商会 動画教材講師(動画で分かる「Adobe Express」)

■ SNS

• Facebook：@2yanko
• Instagram：@2yan2yan2yanko

プロ用ノーコードツール Wix Studioの仕組みと可能性

近年のウェブ制作では、制作スピードと品質の両立、そして更新運用まで含めた“届け方"が問われるようになりました。一方で、ノーコードは手軽さのイメージが先行し、プロの現場でどこまで使えるのかが見えにくいのも現状です。

このセッションでは、プロ用ノーコード/ローコードの総合プラットフォームである Wix Studio を取り上げ、ウェブサイト制作の全体像と、編集・運用・公開までがどう繋がっているのかを「仕組み」から整理します。後半はデモンストレーションを中心に、参加者の皆さんにウェブページをご覧いただきながら、編集と公開の更新結果をリアルタイムにご確認いただきます。

生明 義秀 (あざみ・ぎしゅう)

AZM Design 代表
https://www.azmdesign.com/

Adobe Community Expert

---

東京拠点のアートディレクター/ウェブプロデューサー。

ブランディング、SP広告、ウェブサイト、UI/UX、映像、eラーニングなど幅広い領域で、目的整理からコンセプト、情報設計、デザイン、制作ディレクションまでを一貫して支援する。制作に加えて、広告戦略や制作体制・制作フローの設計に関するコンサルティングも提供する。ノーコード/ローコード制作の研究・実装にも取り組み、講師・登壇を通じて教育にも注力している。

■ SNS

• Facebook：@gishuazami
• X：@g_azami
• note：@g_azami

■ Wix Studio Unofficial Pro Lab

• X:https://x.com/i/communities/1638411471255384064
• Facebook:https://www.facebook.com/groups/editorxjapan/

■ Wix Studio

• Web:https://ja.wix.com/studio