汎用的なオリジナルの顔アイコン
ウェブサイトを制作する上で、
注目のノーコードWebサイト作成ツール「STUDIO」について。
授業「WEBデザイン」
昨年から非常勤講師として、
千葉県の昭和学院短期大学で「WEBデザイン」という授業を担当しています。
4月から7月まで全15週の中で
Adobe CC フォトショップ、イラストレーター、プレミアプロの
基本操作を覚えてもらって作品作りをします。
美大や専門学校ではないので、
デザイン知識、アプリケーションスキルを前提にしない授業になります。
今年が2年目で、試行錯誤が続いていますが、
今年からノーコードのWebサイト作成ツール「STUDIO」を使った
ホームページ制作を課題にしました。
STUDIO https://studio.design/ja
ノーコードツール「STUDIO」
このSTUDIOの最大の特徴は、
ノーコードでオリジナルデザインのWebサイトが制作できることです。
テンプレートをベースにして進めていくだけでなく、
完全な白ページからノーコードでデザインができます。
従来型の制作フローと比べた場合、専門的コーディングを必要としないため
デザイナー作業のみでサイトが完成できます。
授業計画を立てる際、STUDIOがどのようなものか
実際に私自身が触れてみて、ウェブサイトを制作してみました。
完全な白ページからスタートできるデザイン自由度の高さと、
シンプルでわかりやすいUIに驚きました。
これであれば、専門性のない初心者の学生でも扱うことができると思い、
今回挑戦してもらっています。
「STUDIO」のここがすごい
サイト制作の初心者にSTUDIOをおすすめしたいと思える
特筆すべき良いポイントがあります。
・アプリケーションのインストールも必要なく、無料で始められる
・膨大なフリー素材（Unsplash）が使用できる
・フォントも充実している Google Fonts と TypeSquare（モリサワ）
・PC、スマホでのプレビューが1クリック、QRコードでチェックできる
STUDIO公式がYouTubeにチュートリアルをアップしているので
基本操作はこれを見ながら覚えることができます。
STUDIOで制作したサイト
私がSTUDIOを使って制作、実装したサイトです。
群馬×グラフィックデザインのアイデア
https://gunmadesign.studio.site/
ジムハンのオーダー印
https://orderhanko.studio.site/
このコラムでアップしてきた「群馬のグラフィックデザインアイデア」と
私が運営するデザイン事務ハンコ「ジムハン」オーダー印のブランドページを
それぞれ制作しました。
CMSを導入した場合も制作してみました。
https://shichiji.studio.site/
私はサイトの実装に関しては、2000年代初頭にあったテーブルレイアウトや
FLASHアニメーションのアクションスクリプトまでは自身で行なっていましたが
その後は、外部にコーディングを依頼する形でWEBデザインを行ってきました。
制作する際、以下のようなページにしたいと思いました。
・これまで制作してきた画像だけでなく、テキストもあわせて掲載したい
・複数ある作品、事例を1ページで収めたい
・アニメーションGIFを使って画像の出現時やホバーでアニメーション的な演出を加えたい
等のイメージを持って作業を始めたのですが、
STUDIOでの再現も問題なくイメージ通りのサイトになりました。
ギャラリーサイト STUDIO ショーケース
STUDIOユーザーが制作したサイトの事例ギャラリーサイトが
「STUDIO Showcase」です。
STUDIO上級者が作る綺麗なサイトがたくさん紹介されていています。
私が作った上記のサイトも、掲載していただきました。
https://showcase.studio.design/ja/creator/aAbPbn8s
今後のSTUDIOの使い方
ウェブの構築はインターネット黎明期より、
デザインとコーディング以降のエンジニア作業は別作業とされてきました。
（コーディングもできるデザイナーという人はいますが）
現在においても、私自身のウェブの仕事は、コーディングは外部に依頼をしています。
その前提が当たり前だったのですが、STUDIOであれば、
コーディングを必要としないことで、制作時間と費用面のコストを抑えることに繋がります。
実際、ウェブの制作会社でも、STUDIOを導入しているところも増えてきているようです。
グラフィックデザインを軸にして活動している私の場合、
STUDIOはどのように使っていけるかを考えました。
私が受注するサイトのデザインは、シンプルなレスポンシブサイトが多いので
従来の ① デザイン＋外注コーディング ② STUDIOを使って自己完結
依頼内容によって、この2つのスキームを使い分けていくことができそうです。
① 外注コーディングの場合
・既存のサイトのHTMLを引き継ぐ場合
・自分のSTUDIOスキルでは再現できないような、複雑な要素を含む場合
・WordPressが必要な場合（STUDIOにもCMS機能はありますが）
・クライアント側でも画像、テキストの差し替え、修正を行いたい場合
従来通り信頼のおけるプロのコーダーに依頼できるほうが間違いはありません。
上記のような状況であれば、コーディングはプロにお願いすることになると思います。
② STUDIOを使う場合
・新規サイト立ち上げの場合
・コストを抑えたい場合
・LPページ、あるいは数ページで収まるボリューム感の場合
例えば、ショップやサービスのウェブサイトを立ち上げようとする際、
会社概要、サービス紹介、メニュー紹介、地図、問い合わせフォーム
くらいの簡潔な内容であれば、STUDIOのほうがフレキシブルに対応できると思いました。
今後もSTUDIOで色々なサイトを実際に作ってみて、
個人デザイナーだけで、実装までフィニッシュできる可能性を
広げていこうと思っています。
