概要
技術の移り変わりが早いWeb業界において、Web業界の全体像と現在のトレンドを研究し、最新情報を追い続けることの重要性を学ぶ。
内容
- 一般的なWeb制作のフロー（企画・デザイン・コーディング・公開）
- コーディングありとノーコードの違い
- ノーコードツールの紹介（Studio, Wix, Framerなど）
- なぜ今ノーコードなのか（効率化・プロトタイプ）
課題
気になるWebサイトを3つピックアップし、なぜ良いと感じたかをまとめる。
自己紹介
Web制作の動向
Web業界は、技術やトレンドの移り変わりが非常に早い分野です。
数年前まで一般的だった手法やツールも、今ではほとんど使われていない――ということは珍しくありません。
だからこそ、「今、現場でどんな技術が使われているのか」を知っておくことが重要です。
制作環境は日々進化しており、その変化に柔軟に対応できる力は、将来の武器になります。
最新のトレンドを正しく理解しておけば、就職後も即戦力として活躍できるでしょう。
自分のスキルが適切に評価されれば、給与面や働き方にも良い影響があります。
効率よく仕事を進めるためにも、「知識をアップデートし続ける習慣」を、今のうちから身につけておきましょう。
では、どこで情報を得れば良いのでしょうか？
おすすめなのは、X（旧Twitter）などのSNSや、業界の公式サイト・コミュニティです。
特にX（旧Twitter）は、Web業界の現場で活躍する多くのクリエイターがリアルタイムで情報を発信しているので、参考になることが多いです。
私もX（旧Twitter）で最新情報は仕入れています。
また、勉強会やオンラインイベントなどのコミュニティに参加してみるのも良い方法です。
業界の先輩たちと交流することで、自分の視野が広がり、将来のヒントにもつながります。
デザインの考え方について
Webに限らず、さまざまな媒体のデザインに関心を持ち、日頃から「良い」と感じるアイデアを観察・吸収する（＝インプット）ことが大切です。
そして、そのインプットをもとに自分の手を動かして表現してみる（＝アウトプット）ことで、実践的なデザインの思考力が養われていきます。
デザイナーの仕事は、単に「自分の好きなものを作ること」ではありません。
クライアントの要望を正しく理解し、それに対して最適なデザインで応えることが求められます。
そのためには、「なぜこのデザインが良く見えるのか？」という視点を持ち、デザインの意図や構造を考える習慣が不可欠です。
日常的に「良い」と思ったデザインを見つけたら、それをただ真似するだけではなく、
配色・レイアウト・余白・タイポグラフィなど、どんな要素が魅力を生み出しているのかを意識して見てみましょう。
そうした視点の積み重ねが、自分のデザインにも説得力を与える力となっていきます。
※2025年4月に収集した情報
デザイン学習の方法 ― トレース練習について
デザインを学ぶ上で、最も効果的な学習方法のひとつが「トレース練習」です。
これは、すでに一般公開されている優れたデザイン作品を参考にして、そっくりそのまま再現してみる練習のことを指します。
もちろん、ただ模写するだけでは十分とは言えません。
大切なのは、「なぜこのデザインが良いと感じるのか？」「どんな工夫がされているのか？」を考えながら手を動かすことです。
たとえば、「余白が心地よい」と感じた場合、それがどの程度の間隔で設計されているのかを観察しましょう。
「色づかいがきれい」と思ったら、色相・彩度・明度のバランスを分析してみましょう。
このように、感覚で「良い」と思ったことを、言葉やルールに置き換えていくことが、デザイン思考のトレーニングになります。
なお、トレースの対象は必ずしもWebデザインに限る必要はありません。
雑誌のレイアウト、広告ポスター、UIアプリ、パッケージデザインなど、日常のさまざまな媒体に触れて視野を広げることも非常に有効です。
ツールの紹介
Web制作では、デザインや開発、運用に至るまで、さまざまなツールを使い分ける必要があります。
ここでは、実務でもよく使われる代表的なツール群をカテゴリ別に紹介します。
Adobe製ツール
- Illustrator
- ベクター形式のグラフィック制作に強い
- ロゴやイラスト、印刷物のレイアウトにも活用される
- 紙媒体のデザインでは定番のツール
- Photoshop
- 写真の加工や合成、レタッチに最適
- Web・紙媒体のデザイン制作で幅広く活用
- 画像の書き出しにもよく使われる
- Adobe XD
- WebやアプリのUIデザイン向けツール
- プロトタイピング機能で「実際の動き」も再現可能
- 一時期はWeb業界で主流のツールとして利用されていた
Figma（フィグマ）
- ブラウザベースで動作するUIデザインツール。ネットが繋がればどこでも使える。
- XDと似た操作感＋リアルタイムでの共同作業が可能
- 保存操作（⌘S）が不要（=自動保存）
- 無料プランありで、学習用として導入しやすい
- ブラウザベース。PCが変わっても、アカウントさえログインできれば使える
- コマンド+S（保存）を押す必要が無い（超大事！！！）
CMS（コンテンツ管理システム）
WordPress
日本ではWordPressの支持率が非常に高く、2022年9月時点で国内のCMS市場全体の84.4%！
- 記事・ページを管理するWebサイトに最適な仕組み
- 豊富なテンプレートやプラグインが用意されている
- 導入は簡単だが、運用には専門知識（HTML/CSS/JS など）が求められる
- 記事の追加・編集・削除方法
- プラグインや本体のアップデート方法
- トラブル発生時の対処方法
- サーバー／ドメインの管理方法
- セキュリティ対策の実施方法
Drupal
北米でフリーランスするならDrupal覚えてると強いと聞いたことあるよ。
ノーコードツール
Studio
- デザイン〜公開までをコード不要で行えるノーコードツール
- 操作性が高く、デザイナー視点でも使いやすい設計
- オンラインチャットサポートの対応が速く、コミュニティも活発
- 毎年「Studio Design Award」というWebサイトのデザインコンテストも開催
- 日本製なので、日本語対応が充実（サポート・公式ドキュメント）
- チャットサポートの対応が体感速い
- 運営のモチベーションが高い（発信力が強い）（Xで主に発信してる）
- オンラインコミュニティが活発で、学びやすい環境が整っている
操作に困った時にはオンラインチャットで相談してみて。返信が早く、当日中に悩みが解決する場合がほとんど。
先生も答えられない難問にぶつかったら、とりあえずチャットに相談だ。
まとめ：ツール選びの考え方
- 目的や作業内容に応じて、適切なツールを選ぶことが重要。
- 「ツールを使えるようになる」だけでなく、「なぜそのツールを使うのか」を理解することが、実務において役立つ。
- 学生のうちは、興味を持ったツールに怖がらず触れてみることが大切。
Studioアカウントを作成しよう
これから実際にノーコードツール「STUDIO」を使ってWeb制作を体験していくにあたり、まずはアカウントの作成を行いましょう。
STUDIOでは、以下のいずれかの方法でアカウント登録が可能です。
アカウント作成に使える情報
- Googleアカウント
- Gmailを利用している方はこちらが簡単です。
- Facebookアカウント
- SNSを利用している場合、連携がスムーズです。
- メールアドレス + パスワード
- パソコンで受信可能なメールアドレスを用意してください。
- 任意のパスワードを設定する形で登録できます。
登録時の注意点
次回予告
次の授業からは、実際にStudioの画面を見ながら操作方法を学んでいきます。
Web制作もノーコードで学べば怖くない！
次回をお楽しみに！
