ホームぺージは「こうやって」できている！知っておきたいホームぺージの作り方。

2024年10月18日

ホームぺージは「こうやって」できている！知っておきたいホームぺージの作り方。

無料説明会無料

資料請求無料

ホームぺージは「こうやって」できている！

こんにちは！デジタルハリウッドSTUDIO佐賀スタッフです。
Webデザイナーに興味がある方、なってみたい方の中には「ホームぺージってどうやってできているんだろう？」と、色々と調べてみたりしている方もいらっしゃるかもしれません。

スタジオの無料説明会では、未経験の方向けに「ホームぺージがどうやってできているか」をご説明しています。
その際、「ツールの名前だけは知ってるけど…」「デザインは分かるけど、コーディングってなに？」というお返事が返ってきます。

学習を進めていくと具体的な中身が分かってきますが、それでもホームぺージの作り方の流れは最初に知っておきたいですよね？
なので今回は、ホームぺージはこうやってできているというタイトルに沿って、簡単ですが制作作業のご説明させていただきます。

ホームぺージ制作作業の流れ

ワイヤーフレーム制作

ホームぺージのデザイン制作前に、まずは「ワイヤーフレーム」を制作します。ワイヤーフレームはデザインの設計図のようなもの。何を・どこに・どのように配置するかを表現します。制作チームやクライアントとのコミュニケーションツールにも使用します。

ワイヤーフレーム

制作に主に使用するツール

Photoshop

Figma

デザイン制作

完成したワイヤーフレームをもとに、写真の配置や色をつけていきます。※基準になるワイヤーフレームがないと、配置に迷いが生じるためその分時間がかかってしまう場合もあります。

デザイン

制作に主に使用するツール

Illustrator

Photoshop

Figma

コーディング

作成したデザインをもとに、実際にブラウザで表示されるように、HTML、CSSを用いてコーディングをします。

HTMLでマークアップ

HTMLタグを使って文章や写真を入れていきます。ホームぺージ内に必要な材料を入力していく過程です。「タグ」とよばれるものを使用し書いていきます。

マークアップ画面

テキストエディタの画面

写真や画像等を入れる作業なので、まだ形が整っておらず、文字の大きさ、色もついていない状態です。「テキストエディタ」というツールを使い、HTMLを書いていきます。

制作に主に使用する言語＆ツール

HTML

Visual Studio Code

CSSでレイアウト

CSSを使ってHTMLでマークアップした画像や文字の配置・サイズ調整、色付け等をしていきます。

コーディング画面

テキストエディタの画面

徐々にレイアウトが整ってきました！文字や背景にも色がついてきて、デザインに近づいてきています。そしてパソコン画面だけでなく、スマートフォン用の画面もコーディングしていきます（レスポンシブ対応）。
そして、JavaScript等を使いスライドショーやポップアップの表示など、動きをつけることも可能です。

制作に主に使用する言語＆ツール

CSS

JavaScript

Visual Studio Code

ホームぺージ完成！

設計図のワイヤーフレームから、デザイン、コーディングを経てついにホームぺージが完成しました！いつも何気なく使っているホームぺージの多くは、このような流れで制作されています。初めてできた時の感動は忘れられません…。

=============================

いかがだったでしょうか？初めて聞く言葉やツール、作業内容もあったかもしれませんが、Webデザイナー専攻では、この一連の作業内容を学習し、最後はオリジナルホームページを制作できるようになります。分かりやすい教材動画と、強力なトレーナー陣がついていますのでご安心ください。

もっと詳しく説明を聞いてみたい！という方、ぜひ無料説明会へお越しください。
スタジオ佐賀と一緒に、Webデザイナーを目指しませんか？
ご来校、お待ちしております。

無料説明会、資料請求のご請求