Web制作のいろは（デザイナー／フロントエンドエンジニア）

#（使ってない？必要ない？削除検討）Webサイトホームページ

created: 2024/06/30, modified: 2024/07/02

Web制作を勉強し始める人のために。デザインとそれを支えるフロントエンドのことをお伝えしていきます。

まず、自己紹介。私やぶけんは2006年から長年Web制作に携ってきました。自社サービスのUI／旅館サイトの構築／コーポレートサイトの運用など基本的なWeb制作から、ライティング、動画制作（撮影・絵コンテ）、システム開発など、様々な形・立場で現場の制作を経験しました。教えることは好きです。

目的と対象

Web制作未経験だけど将来のためにスキルを身につけたいという方へ。Web制作の基本から手を動かす実践まで、あとは現場で使えそうな応用も。Web制作を始めたばかりの人や興味がある人は読んでみてください。
デザインとフロントエンドのことが中心となるので、サイト設計やバックエンドは控え目になると思います。

デザインとフロントエンドのどちらを先に？！

一通りのWeb制作スキルを身に着けたら、実際の制作の現場で経験を積んでいくことになると思います。始めはチーム編成でデザインもしくはフロントエンドのアシスタントとなるはずですが、デザインとフロントエンドのどちらを選びますか？

Webサイトの規模とチーム体制

チームで役割を分けデザイン専門となれば、より訴求力の高いデザインを追求していくことができます。（チームで中規模サイト）
もう一つの道としては、例えば先にデザインを実用レベルまで習得し、その後フロントエンドのスキルを習得すれば一人でWebサイトを構築できるようになります。

Webデザインの基礎

ユーザーがWebサイトを訪れたときに感じる視覚的な印象や体験を設計します。ユーザーは目的があってWebサイトを見ているので、ゴールまで迷わないナビや導線になっていないか、その過程で得られる情報は付加価値を与えられているか、などに気をつけてデザインしていきます。

• デザイン四大原則
• Webレイアウトとナビゲーションメニュー ★
• 色彩設計
• タイポグラフィ
• グラフィックやチャート
• 写真選定
• ユーザー体験（UX）デザイン ★

★ Webデザイン特有（紙のデザインではあまり見られない）

フロントエンドの基礎

デザイナーのデザインを忠実に再現することにフロントエンドの意義はあります。さらに操作・動きの快適さでデザイナーの意識を超えたら最高です。

• フロントエンドの基礎
• HTMLの基礎
• CSSの基礎
• JavaScriptの基礎

実践、簡単なウェブサイトの作成

• デザイン制作（始めはマネから）
• サーバー準備
• HTMLの作成
• CSSの追加
• JavaScriptの統合

Web制作ツールの紹介

• デザインツール: Figma
• コードエディタ: Visual Studio Code, Sublime Text, Atom
• ブラウザ開発者ツール: Chrome DevTools, Firefox Developer Tools
• バージョン管理: GitとGitHubの基本

結びに

一昔前とは違って、今はWebサイトを持たなくてもSNSやブログで事足りてしまったり、また、ノーコードで制作できるWebサイト作成サービスも数多くあります。
そんな環境・時代の中でも、イチから作る需要はゼロにはならないと考えており、付加価値をどんどん付け足していける制作人になってほしいと思っています。先人たちが残したノウハウを効率よく身につけ、新たな道を切り開いていって頂きたいです。