Web制作に関わる上で必要なスキルや知識、最新のデザインツールや実践的なテクニックを学習する熊本デザイン専門学校GD2 Web演習のための記事を掲載しています。
第1回目は最新のWeb制作の動向(2023年4月時点)とツール群の紹介を行います。
最新のWeb制作の動向について
なぜ、知る必要があるのか
最新のWeb制作の動向を学ぶことは、Web業界で働く場合、とても重要です。Webの環境は常に変化し続けており、新しいテクノロジーやツールが登場するたびに、トレンドやツールもガラッと変わります。最新の動向を追い続け、常に学ぶ姿勢を忘れなければ、学生の皆さんもきっとWebデザイナーで活躍できます。
最新の動向を学ぶことで、こんなメリットがあります。
現在のWeb制作トレンドやツールがいつまで使えるか、残念ながら誰にもわかりません。デザインのトレンドは日々変わっていきますし、使用しているツールが数ヶ月後に新しいツールに置き換わる可能性もあります。最新の知識・技術を知ることで作業のクオリティや効率も上がり、より精度の高い仕事をこなせるかもしれません。
残業で徹夜しないためにも、最新の情報は常に吸収することを心がけ、自身の知識(=引き出し)として蓄える習慣を身につけることが大切です。Web業界の情報収集には、TwitterなどのSNSがオススメ。公式のコミュニティ等があればむしろそっちがオススメ!業界の先輩たちと積極的に交流してみましょう。
Web制作の動向を学ぶことで、自身のスキルアップ・知識の向上が見込めます。最新の動向を把握しているということは、あなたが新しいデザインを追求し、成長し続けているということ。高いスキルや知識を持つデザイナーは、より濃いプロジェクトに携わることができ、周りの評価も上がり、お給料アップの可能性も!いろんな情報を吸収して、ライバルから頭一つ抜き出してみよう。
身についた知識とスキルは、お仕事でも必ず役に立ちます。気になった情報は自分で深堀りして調べてみるのもオススメです。蓄えた知識を「使える武器」として活用することができれば、あなたの経験値もアップ、周囲からの評価もアップ!Win-Win!
Web制作の今のトレンドをみつけてみよう!
Webデザインは日々流行が変動し、新しいものが溢れています。その中で、デザイナーはクライアントの要望に答えていく必要があり、自分の中のデザインの引き出しは多ければ多いほど良いです。様々な媒体のデザインに興味を持ち、頭にアイデアを入れ=インプット、頭に入れたアイデアを実践=アウトプットすることで、デザインの思考を身につけることができます。
(2023年4月19日 時点の情報)
学生の皆さんは、『有名な作品を真似して同じものを作ってみる』デザインのトレース練習(=アウトプット)に挑戦するのもオススメです。トレースを行う際には、なぜ、このデザインなのかを考えてみましょう。良いと感じるものには何か理由があるはずです。「なぜ美しいのか」「なぜ良いと感じるのか」を紐解くことで、デザインの思考を鍛えることができます。Webデザインに限らず、気になるデザインを見つけたら「なぜ」を考えてみるのも面白いですよ。
Web制作において便利なツール群の紹介
デザインツール
Webデザイナーがアプリ・Webサイトのデザインを行うためのツールで、画面設計(Webページがどのように推移していくのかをまとめる作業)やデザインは勿論、簡単な画像の書き出しまで幅広い用途で使用します。有名なツールとしては、Adobe XD、Canva、Figmaなどがあります。
今回は、上記ツールの中から、Figmaについて取り上げます。
Figma

Figmaの特徴として、「ブラウザ上でも動作をする」ブラウザベースのデザインツール(サービス)という点があります。使用できるブラウザは、Chrome、Safari、Microsoft Edge、Firefoxです。
そもそもFigmaって知ってる…?去年、Adobeに買収されたんだけど…
数年前はAdobe XDやPhotoshopを使ったデザイン制作が主流でしたが、2022年には利用率がAdobeXDを上回るなど、今後の状況次第ではその前提も変わるかもしれません。
アカウントを作成し、インターネットに繋がってさえいれば、ブラウザで直ぐに作業可能。主にワイヤーフレーム(Webサイトの設計図)、Webサイト、アプリ、グラフィックデザイン、プレゼン資料などの制作ツールとして利用することが多いです。フリープランがあり無料で利用できるため(一部機能は制限されますが)、手軽に導入できる点も嬉しいポイント。
もう一つ、個人的に好きな特徴として、コマンド+S(保存)を押す必要が無いという点があります。データは常にクラウド上に保存されるため、保存されていない…(絶望)…なんてこともありません。私も新人の頃、最後の保存を忘れて、同じものを2回作った経験が山ほどあります。
ともあれ、最新のツールに積極的に触れておくことは大切です。元々は英語版のみでしたが、2022年7月に大幅アップデートされて、日本語版にも対応したので、興味のある人はアカウントを作って、ぜひ触ってみましょう。
(画像の書き出しだけでもすごく便利だから実際の画面で教えますね)
Webサイト作成ツール
Webサイトに特化した作成ツールは、CMS(Contents Management System)とも呼ばれています。国内外で有名なものとしては、WordPressが一番メジャーです。このサイトもWordPressで構築していて、ページ内の情報はすぐに変更することができるんですよ。
GD2Bの授業中です。
WordPressはテンプレート(テーマ)やプラグインが豊富に用意されているため、手軽にサイト制作をすることができる一方、HTML、CSS、JSといった専門的な知識・スキルを身につける必要があります。運用(コンテンツの追加や削除、変更などの更新、メンテナンス、トラブル対応)をしていく上では、サーバーやドメインに関する知識も必要となり、場合によってはセキュリティ対策が求められるかもしれません。(なにより、世界中で使用されている有名なオープンソースですので、ハッカーの標的にもなりやすい)
とはいえ、ノウハウや解決方法の情報も豊富にあるため、知識のあるデザイナーにとってはとても頼もしい存在です。
その他にも、ノーコードツールと呼ばれているコードを触らずにWebサイトを制作できるサービス(ツール)も増えてきました。代表的なものとして、STUDIO、Wix、ジンドゥー、Shopify、BASE、などが挙げられます。
今回は、上記ツールの中から、STUDIOについて取り上げます。
STUDIO

STUDIOは、ノーコード(コードを書かずに)でデザイン性の高いサイトを作成できることが最大の特徴です。現在は様々なテンプレートが用意されているため、デザイン未経験の人でも目的にあったWebサイトを手軽に制作できます。
従来、デザイナーが担っていた「デザイン(=設計)」とマークアップエンジニアなどが担っていた「開発」の部分までを、コーディングの知識無しでも再現可能にしたのが、STUDIOです。
https://help.studio.design/ja/articles/1884380-studio%E3%81%A8%E3%81%AF
個人的に好きな特徴として、サポートの対応が速いという点もSTUDIOを推す理由のひとつです。操作に困った時にはチャットで相談!返信が早く、当日中に悩みが解決する場合がほとんどです。困ったらとりあえず聞いてみよう。
デザインに関するイベント「STUDIO AWARD」も毎年開催されています。STUDIOで作成され、上位にノミネートしたサイトはかなり見ごたえがあります。デザインが好きな人は絶対にチェックすべし。
今年はついにリアルイベントが開催されて、かなり盛り上がったようです。次回は行きたい。
比較的新しいニュースとしては、『STUDIO AI』というAIによるデザインアシスト機能が近々リリースされるようです。
こちらも楽しみすぎる。
開発会社は日本企業で、今年(2023年)2/24には公式のコミュニティサイト「STUDIO Community Japan」がオープンしました。STUDIOユーザーは誰でも参加できるので、興味の湧いた人は参加して仲間になろう。
アカウントを作成し、触ってみよう!
アカウントを作成するには、以下のいずれかのログイン情報が必要です。
- Facebookアカウント
- Googleアカウント
- メールアドレス(パソコンで受け取れるメールアドレス)とログイン用のパスワード
次回予告
次の授業からは、STUDIOを使ったWebサイト制作を学んでいきます。
スムーズにSTUDIOのアカウントを作成できるよう、ログイン情報を準備しておき、自分のパソコンにChromeのインストールを行いましょう。
(早めにアカウント作成できた人は、しばし待たれよ)
次回をお楽しみに!