ノーコード「STUDIO」でデザインカンプまでやれちゃう！むしろそのほうが早い。私のやり方

JABです！
久しぶりに本気でデザインしてます。
事業内容や社風、ビジョンや理念まで如何に伝えるか、日々悩みながらも楽しく仕事してます。

今回はAdobeのツールを使わずにSTUDIOのみを使ってデザインを進めているわけですが、これが私には非常にマッチしてるようですw
（もちろんサイト内で使用する画像や素材はAiやPsを使いますが）

構成を練る

まずは打合せなどから必要な情報をヒアリングして、情報設計、サイト構成、掲載コンテンツなどを決めて行きます。これはどんなWeb制作でも同じことですね。
ヒアリング中や終了後、まっさらな紙にページ構成やコンテンツ、テーマカラーなどを書き殴り、それを元にワイヤーフレーム（ここではかなり大雑把）を作って行きます。

ここからすぐにSTUDIOへ

通常であれば、XdやPsを駆使してデザインカンプを作成するところですが、正直STUDIOでこの段階から作っていったほうが私は早いんです。

デザイン勉強する前からSTUDIO使っていたのでw

STUDIOを開いてまずやることは、（プロジェクトの作成とかは当然として…）

使用するカラーをパレットに

途中で変わったりもするかもしれませんが、ひとまずヒアリングした後にテーマカラーを選定しておいて、それをSTUDIOのカラーパレットに追加しておきます。

ベースカラーやアクセントカラー、基本のフォントカラーやhover時のカラーなど。
ここで完璧に使用するカラーを揃える必要はありませんが、概ねイメージするカラーをキープしておきます。

あらかじめパレットにキープしておくだけで、その後の作業は驚くほど早くなります！

基本的なパーツを作る

私はサイト内でよく使うであろうアセットを一つのページに予め作ってしまいます。

ボタンやカードなど。
この段階でcolorやpadding、box-shadowまで設定してしまっています。

サイト内で何度も使用するような要素はこうして別のページに作っちゃってます。

ここまで来たら下準備はOK！

ワイヤーを元にトップページを大まかに

ここまで来たらあとは大枠の構成を作ってしまいます。
イメージとしては、

Header、ファーストビュー、あとは各セクションごと、最後にfooter

って感じです。
この時、imgのところは特に拘らずに、No Image状態のまま進むことが多いです。
写真って結局は色味とかアングルとかでサイトの印象って変わるので、そこはイメージだけはしてますが、この段階では画像を探したりはしてません。
あくまで大まかに。

また、ここではボタンなどはあらかじめ作って置いたテンプレをコピペで配置していってます。

あっ、各セクションを作るときは、親ボックスのパディングだけは決めてしまって、必要な数だけコピペで増やしてくってことをしてます。

※STUDIOは複数選択して一気にスタイルを設定することもできるので、後からでも全然大丈夫です。

あとは試行錯誤しながらデザインを詰めていく

ここからは、細かくデザインして行きます。
フォントや要素のサイズ、レイアウトの微調整など。

1番最初に各ページ共通のパーツ（共通headerやfooter）をデザインしてしまって、「symbol化」します。

symbol化って確か2.0の時からできるようになったんだっけかな？

簡単にいうと

symbol化することで、複数のページに同じheaderを使うとき、どこかのページで修正や変更した内容が他のページでも適用されます。

って機能です。

この機能がなかったときは、複数のページが出来上がった後に、メニュー項目を変えなきゃいけないってときは、わざわざ全ページの当該項目を直さなきゃいけなかった…

ホント、STUDIOの急速な進化のおかげでどんどんWeb制作が楽になっていくわけですw

と、話が逸れてしまいましたが、header、footerをデザインしたらsymbol化しておきましょう！

それ以外のところは画像を入れたり（そもそも使用する画像が既にあるならそれ、なければイメージに近い色味や風景、人物の画像）、テキストを入れたりして、各セクションを完成させて行きます。

概ねトップページはこれでできちゃいます！

もちろん試行錯誤の過程で迷走してしまったりすることもありますが、それはどんな制作でも一緒です。そういうときは一旦作業ストップして別のことしたりしますw

制作のモチベーションが高かったり、ノッてきたなぁってときは、hoverをつけたりアニメーションをつけたりして、どんどんイメージを形にしていきます。（簡単にその辺りの設定もできてしまうので、遊んでる感覚ですw）

他のページはトップページのデザインルールを引き継いでチャチャっと

私はトップページ以外のページって、トップページをデザインしている時には概ねイメージできている気がします。
（デザインのレパートリーのストックが少ないからかな汗）

headerとfooterは、先程symbol化したものを配置して使えば良いんです。
あとはカードを使ったりボタンを使ったり、トップページと同じ要領で細かくデザインして行きます。

STUDIOにはCMSもあるので、カンパニーページなどの「新着情報」や「リリース」、「ブログ」なども作れます。

今作っているサイトでは、トップページに「News」セクションがあるので、そこはCMS使って動的ページも作らなきゃかなぁと思ってます。

各デバイスごとに調整していく

最初にPCデザインができたら、あとはデバイスごとの調整をして行きます。

（STUDIO3.0では、ブレイクポイントの数値まで自分で設定できちゃう！）

デフォルトでPC、タブレット、スマホのブレイクポイントが設定されているので、それを使ってそのままデザインすれば、特に問題はないと思います。

何かの都合でブレイクポイントを指定したい場合は変更する感じですかね。

画面サイズごとによく使うであろう機能はdisplay: none;とかですかね？スマホでハンバーガーメニュー使いたい時とか。
その辺はおそらくSTUDIOのヘルプなどを見れば簡単にできるので割愛します。

デザインカンプ完成

実際に使用する写真や画像素材を作成してアップロードしたら、あっという間にデザインカンプが完成してしまいます。

実際にLiveプレビューで各種デバイスの表示を確認してページ遷移やhover、アニメーションの違和感なども直していきます。

いや、実際デザインカンプなんだからアニメーションはまだつけなくてもいいでしょ！？

ってツッこまれるんでしょうか？w

これは個人的な意見ですが、私はここまでやったほうが完成のイメージがつきやすいんですよね。

デザインカンプの共有はLiveプレビューのURLで

デザインができたら通常クライアントに確認します。修正があればするし、OKであればここからコーディングに入る…いや、そもそもSTUDIOでのリリースが前提ならここで完成です！！

ということで、とにかくこれをクライアントに共有するわけですが、この際にLiveプレビューのURLを送れば、クライアントは実際にデバイスで確認できます。

デザインカンプの段階でhoverやアニメーションの設定もしてしまうのは、このためでもあります。
デザイナーとして考えるものって、動きも含めたものなので、そのイメージがクライアントの要望にマッチしているかということも同時に確認してもらいたいって思います。

これで一連のWebデザインは終了です。
STUDIOの使い方に慣れていたら、むしろXdとかPsを使うより本当に早いです！

リリースはどうするか

今回は会社から「Wordpressで」と言われたのですが、これはSTUDIOの存在を知らないからで「CMS＝Wordpress」という固定観念からくるものでした。
なのでSTUDIOを紹介して、CMSの使い方などの説明資料を作ればそれでオッケーかなとも思いますw

「これ、実はこのままリリースできますよ！」

もちろん、これをデザインカンプとしてこの後コーディングするにしても、私にとっては大幅な時間削減が出来たのでオーライです！

何が言いたいかというと…STUDIOってWebデザインツールとしても超便利ってことです。

多分AiやPs、Xd、figmaの使い方を覚えるよりもSTUDIOの使い方を覚えるほうがシンプルで直感的で簡単かなぁと。

それぞれのデザインツールにはそれぞれの利点がありますが、これからWebデザイン始めますって人はまずSTUDIOを触ってみてはいかがでしょう？

余談

先日STUDIOからノベルティボックスが届きました！Webデザイナーとしてというよりも、STUDIOの熱狂的ファンとしてブランドアンバサダーをやらせていただいておりますw
やっぱりこういう気遣いというか、ファンを大切にする企業って、さらに応援したくなるし、ずっと使い続けたいって思いますよね！

2.0リリース時のSTUDIO NIGHTでスライドに表示された

Good Bye Wordpress！

が現実になる日も来るんじゃないかと期待しています！（コーディングの仕事が減っちゃいそうだけどwww）