KDC : Web演習第1回

2024年4月17日

フクシママサミチ

Web制作に関わる上で必要なスキルや知識、最新のデザインツールや実践的なテクニックを学習する熊本デザイン専門学校GD2 Web演習のための記事を掲載しています。
※2024年4月更新版

第1回目は、最新のWeb制作の動向とツールの紹介を行います。

Sunnana Inc. の紹介

Web制作の動向

なぜ、知る必要があるのか

技術の移り変わりが早いWeb業界において、最新のWeb制作の動向を学ぶことはとても重要です。少し前まで使えていた技術や手法は、新しいテクノロジー・ツール・方法が登場するたびに、過去のものとなります。Webの制作環境は常に変化し続けており、最新の情報を学び続ける姿勢が大切です。

業界の現状やトレンドの実態を正しく理解しておけば、就職してからの知識＝武器になるはず。
武器を正しく使えば、あなたの評価も上がり、お給料アップ！
残業で徹夜しないためにも、知識を蓄える習慣を身につけよう。

Web業界の情報収集は、X=旧TwitterなどのSNSがおすすめ。
公式コミュニティ等があれば、思い切って飛び込んでみよう。
業界の先輩たちと交流できるチャンス。

デザインの考え方

Webに限らず様々な媒体のデザインに興味を持ち、良いアイデアを吸収し（=インプット）、吸収したアイデアを実践（=アウトプット）することで、実践でも使えるデザインの思考を身につけることができます。

デザイナーはクライアントの要望に答えていく必要があります。
良いものを見て、それがなぜ良いと思わせるのかを考え、デザインの思考を鍛えましょう。

※2024年4月17日時点の情報

ツールの紹介

以下にWeb制作で触れる代表的なツールを記載します。
これらは、Web制作は勿論、簡単な画像の書き出しや紙媒体のデザインまで幅広い用途で使用します。

Adobe

illustrator
- ベクターを操るデザインソフト
- イラストや素材（パーツ）制作が得意
- 紙媒体のデザイン制作で大活躍
Photoshop
- 写真編集・合成加工が可能なソフト
- 画像書き出し時に大活躍
- 紙媒体・Web媒体のデザイン制作、どちらでもいまだ現役
Adobe XD
- Webサイトやアプリなどのデザイン制作に特化したソフト
- プロトタイピング機能で実際の動きがシュミレート
- Web業界ではこちらの使用率が多い印象

Figma

クラウドベースのデザインツール。Adobe XDと似ており、プロトタイピング機能、リアルタイムでの共同作業も可能。使用できるブラウザは、Chrome、Safari、Microsoft Edge、Firefox。

Figma 公式サイト

（そもそもFigmaって知ってる？去年、Adobeに買収されかけたんだけど…）

Adobeによる買収計画が立ち消えたデザインツール「Figma」の未来をCEOが語る、Adobeから支払われた1500億円を何に使うのか？ – GIGAZINE

数年前はAdobe XDやPhotoshopを使ったデザイン制作が主流でしたが、2022年には利用率がAdobeXDを上回る情報も…

数字で見るデザインツール利用率（主にFigmaの事） –
MoQup｜HIROKI HARADA

毎年見てるGoodpatchさんの Design Data Book 2022年版が公開された(о´∀`о)💛💛

前回はツール利用率でAdobeXDが１位だったけど、今年はFigmaが１位に…！！！！正式な日本語対応やAdobeに買収されたことも影響しているのかな？

なにはともあれFigmaが広がって嬉しいです✌https://t.co/4d86lJuwAW pic.twitter.com/Dfi2xJckkK
— もち | デザイナー起業家・CDO (@makiko_sakamoto) November 10, 2022

実務で使って良かった点

ブラウザベースなので、ネット環境が整っていればどこでも使える
コマンド+S（保存）を押す必要が無い（超大事！！！）
無料でも利用できるので導入しやすい（一部制限有り）

※個人の印象です

CMS（Contents Management System）

簡単にいえば、記事管理を行うWebサイトなどを作るための仕組み。
国内では『WordPress』が一番有名。

テンプレート（テーマ）やプラグインが豊富に用意されているため、手軽にサイト制作をすることができるが、構築時にはオリジナルのカスタムを施すことになる為、HTML、CSS、JSといった専門的な知識・スキルが必要。

実務で運用する際は、

WordPressの基本的な使い方
- コンテンツ（中身）の追加・削除方法
- WordPress自体・プラグインのアップデート後の対応方法
- 更新時のトラブル対応の方法
サーバー、ドメインの基礎知識

など、様々な知識が必要となります。気軽に導入するにはハードルが高く、場合によってはセキュリティ対策が求められるかもしれません。（なにより、世界中で使用されている有名なオープンソースですので、ハッカーの標的にもなりやすい）

ノーコードツール

近年増えてきた、コードを触らずにWebサイトを制作できるサービス（ツール）。
代表的なものとして、STUDIO、Wix、BASE、など。

STUDIO

STUDIOは、国産のノーコードツール。

STUDIO 公式サイト

従来、デザイナーが担っていた「デザイン（=設計）」とマークアップエンジニアなどが担っていた「開発」の部分までを、コーディングの知識無しでも再現可能にしたのが、STUDIOです。
https://help.studio.design/ja/articles/1884380-studio%E3%81%A8%E3%81%AF