Web制作に関わる上で必要なスキルや知識、最新のデザインツールや実践的なテクニックを学習する熊本デザイン専門学校GD2 Web演習のための記事を掲載しています。
※2024年4月 更新版
第1回目は、最新のWeb制作の動向とツールの紹介を行います。
Web制作の動向
なぜ、知る必要があるのか
技術の移り変わりが早いWeb業界において、最新のWeb制作の動向を学ぶことはとても重要です。少し前まで使えていた技術や手法は、新しいテクノロジー・ツール・方法が登場するたびに、過去のものとなります。Webの制作環境は常に変化し続けており、最新の情報を学び続ける姿勢が大切です。
業界の現状やトレンドの実態を正しく理解しておけば、就職してからの知識＝武器になるはず。
武器を正しく使えば、あなたの評価も上がり、お給料アップ！
残業で徹夜しないためにも、知識を蓄える習慣を身につけよう。
Web業界の情報収集は、X=旧TwitterなどのSNSがおすすめ。
公式コミュニティ等があれば、思い切って飛び込んでみよう。
業界の先輩たちと交流できるチャンス。
デザインの考え方
Webに限らず様々な媒体のデザインに興味を持ち、良いアイデアを吸収し（=インプット）、吸収したアイデアを実践（=アウトプット）することで、実践でも使えるデザインの思考を身につけることができます。
デザイナーはクライアントの要望に答えていく必要があります。
良いものを見て、それがなぜ良いと思わせるのかを考え、デザインの思考を鍛えましょう。
※2024年4月17日 時点の情報
おすすめの学習方法
デザインのトレース練習
すでに一般公開されている先人たちの作品を真似して作ってみよう。
良いと感じるものには何か理由があるはず。
「なぜ美しいのか」「なぜ良いと感じるのか」を考えて、デザインの思考を鍛えよう。
Webデザインに限らない！
ツールの紹介
以下にWeb制作で触れる代表的なツールを記載します。
これらは、Web制作は勿論、簡単な画像の書き出しや紙媒体のデザインまで幅広い用途で使用します。
Adobe
- illustrator
- ベクターを操るデザインソフト
- イラストや素材（パーツ）制作が得意
- 紙媒体のデザイン制作で大活躍
- Photoshop
- 写真編集・合成加工が可能なソフト
- 画像書き出し時に大活躍
- 紙媒体・Web媒体のデザイン制作、どちらでもいまだ現役
- Adobe XD
- Webサイトやアプリなどのデザイン制作に特化したソフト
- プロトタイピング機能で実際の動きがシュミレート
- Web業界ではこちらの使用率が多い印象
Figma
クラウドベースのデザインツール。Adobe XDと似ており、プロトタイピング機能、リアルタイムでの共同作業も可能。使用できるブラウザは、Chrome、Safari、Microsoft Edge、Firefox。
（そもそもFigmaって知ってる？去年、Adobeに買収されかけたんだけど…）
数年前はAdobe XDやPhotoshopを使ったデザイン制作が主流でしたが、2022年には利用率がAdobeXDを上回る情報も…
実務で使って良かった点
- ブラウザベースなので、ネット環境が整っていればどこでも使える
- コマンド+S（保存）を押す必要が無い（超大事！！！）
- 無料でも利用できるので導入しやすい（一部制限有り）
※個人の印象です
CMS（Contents Management System）
簡単にいえば、記事管理を行うWebサイトなどを作るための仕組み。
国内では『WordPress』が一番有名。
テンプレート（テーマ）やプラグインが豊富に用意されているため、手軽にサイト制作をすることができるが、構築時にはオリジナルのカスタムを施すことになる為、HTML、CSS、JSといった専門的な知識・スキルが必要。
実務で運用する際は、
- WordPressの基本的な使い方
- コンテンツ（中身）の追加・削除方法
- WordPress自体・プラグインのアップデート後の対応方法
- 更新時のトラブル対応の方法
- サーバー、ドメインの基礎知識
など、様々な知識が必要となります。気軽に導入するにはハードルが高く、場合によってはセキュリティ対策が求められるかもしれません。（なにより、世界中で使用されている有名なオープンソースですので、ハッカーの標的にもなりやすい）
ノーコードツール
近年増えてきた、コードを触らずにWebサイトを制作できるサービス（ツール）。
代表的なものとして、STUDIO、Wix、BASE、など。
STUDIO
STUDIOは、国産のノーコードツール。
従来、デザイナーが担っていた「デザイン（=設計）」とマークアップエンジニアなどが担っていた「開発」の部分までを、コーディングの知識無しでも再現可能にしたのが、STUDIOです。
https://help.studio.design/ja/articles/1884380-studio%E3%81%A8%E3%81%AF
- サポートの対応が速い
- 運営の発信力が強い（X=旧twitterで主に発信してる）
- オンラインコミュニティも活発
操作に困った時にはオンラインチャットで相談してみて。
返信が早く、当日中に悩みが解決する場合がほとんど。先生も答えられない難問にぶつかったら、とりあえずチャットに相談してみて。
年末には、デザインコンテスト「STUDIO AWARD」も毎年開催されています。上位にノミネートしたサイトはかなり見ごたえ有り。全てSTUDIOで作成されているので、解析するのも楽しい。
Webデザインが好きな人は絶対にチェックすべし。
STUDIOのアカウントを作成してみよう
アカウントを作成するには、以下のいずれかのログイン情報が必要。
- Facebookアカウント
- Googleアカウント
- メールアドレス（パソコンで受け取れるメールアドレス）とログイン用のパスワード
次回予告
次の授業からは、STUDIOを使ったWebサイト制作を学んでいきます。
Web制作もノーコードで学べば怖くない！
次回をお楽しみに！
