WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

Webサイトを見る、知る、そして作る

Webサイトを見る

Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。

Webサイトを知る

ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。


既存のギャラリーサイトを使えば、それぞれのテーマに沿ったサイトを簡単に探す事が出来るので、積極的に活用しましょう。

bm.s5-style.com


81-web.com


www.ikesai.com



muuuuu.org




アニメーションを使ったWEBサイト

http://www.teamgeek.co.za/www.teamgeek.co.za




動画を使ったWEBサイト

www.tenku-f.jp


co.hellolife.jp


couleecreative.com



良いと思ったサイトをまとめる

bntncayo05.starfree.jp

http://w007sw.wp.xdomain.jp/w007sw.wp.xdomain.jp

xd091462.wp.xdomain.jp




既存のサイトを真似して作る

一番最後の段階として、既存のサイトを真似して作ってみましょう。既存サイトの文章構造やレイアウトをトレースする事でそのサイトの設計思想や工夫しているポイントなどがより具体的に解ってきます。
なので、積極的に既存のサイトを真似しましょう。初学者にとってデザインとはとにかく良いサイトを真似る事です。
さらにポートフォリオの事を考えると、画像などは既存サイトのものをそのまま使うのではなく、自身でテーマを決めて、テーマに沿った内容に差し替えてみましょう。



www.bloomingville.com


stylebread.com



道具の使い方を覚える

PCの使い方

物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター(PC)は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。
今までのようにユーザーとしての使い方では無く、制作者としての使い方を覚えていきましょう。


ブラウザーの使い方

ブラウザーとは?

ウェブブラウザ(インターネットブラウザ、web browser)とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ(ブラウザー)と呼んだ場合、多くはウェブブラウザのことを指す。

授業ではFirefoxGoogle Chromeの2つのブラウザーを主に使用していきます。

Mozilla Firefox

非営利団体である「Mozilla Foundation」が開発したブラウザー
Web開発に適したアドオンと呼ばれる追加機能が豊富。最新のHTML5とCSS3による表示が可能。

www.mozilla.org


Google Chrome

Googleが開発しているブラウザーGoogleアカウントと同期する事で様々な拡張が可能。
世界的に見るとシェアNo1ブラウザー。最新のHTML5とCSS3による表示が可能。

www.google.co.jp


Web制作におけるIE(Internet Explorer)

日本では長年ダントツのシェアを占めていたが、以前から不具合が多くweb制作者にとって悩みのタネでした。
最近は事情も変わって場合によってはIE未対応でOKの場合も出て来ています。


japanese.engadget.com

「2009年1月から2018年8月まで」デスクトップでのブラウザーのシェア推移

f:id:yachin29:20190318111309p:plain


2019年1月現在の日本国内のブラウザーシェア
f:id:yachin29:20190318110103p:plain


◆ 2019/01期の国内シェアランキング

1位 Chrome 58.46%  2位 IE 15.19%  3位 Firefox 9.47%  4位 Safari 8.3%  5位 Edge 6.69%  6位 Opera 0.84%  7位 Vivaldi 0.19%  8位 QQ Browser 0.16%  9位 Sleipnir 0.16%  10位 その他 0.54%  




gs.statcounter.com







検索の仕方を覚える

検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。

「AND」検索

例(池袋 カフェ)
一番使われている方法で2つ以上のキーワードを入力して検索精度を上げることができます。
キーワード間に一文字分のスペース (半角、全角どちらでも可) を入れる。

「OR」検索

例(マイケル・ジャクソン OR Michael Jackson
たとえばマイケル・ジャクソンを調べるときに日本語で「マイケル・ジャクソン」と表記したサイトと英語で「Michael Jackson」と表記した2種類があり場合に、そのどちらも検索結果に出したい場合などに使うのが「OR」検索です。
キーワードを半角大文字「OR」、もしくはパイプ「|」で区切り、その前後には半角スペースを入れます。

「マイナス」検索

「キーワード1」で検索したいが「キーワード2」の情報は除きたい場合、「-」の後ろに書いたキーワードを除外して検索することができます。
例:英会話 -教室



関連サイト検索

そのWebサイトと似たようなサイト(類似性の高いサイト)を見つけたい場合、related:を使ってみましょう。
同業種の競合サイトを見つけたい、類似サイトを探して参考にしたい時などに役立ちます。

例:related:http://toyota.jp/(※トヨタ自動車の公式HPです)
結果:日産、ホンダ、マツダ、スズキ等の公式HPがヒット

タイトル検索

タイトル名をキーワードで検索したい場合は「intitle:」「allintitle:」がおすすめです。 「intitle:」は単一のキーワードを、「allintitle:」は複数のキーワードを検索する時に使用します。

例:intitle:Web制作
結果:ページタイトルに「Web制作」を含むページがヒット

例:allintitle:Web制作 おすすめ
結果:ページタイトルに「Web制作」「おすすめ」を含むページがヒット


画像検索
  • 写真の場所はどこでしょう

f:id:yachin29:20200531225348j:plain

  • 写真の人物は誰でしょう

f:id:yachin29:20070912134041j:plain



Chromeデベロッパーツールを使う

Google Chromeデベロッパーツールは、サイト制作において欠かせないツールです。
他のブラウザにも同様のツールはありますが、Chromeのものが最も使いやすいと感じる人が多いのではないでしょうか。


saruwakakun.com



Gメールアカウントを作る

Googleアカウントはweb制作者にとって、もはや必須の物といえます。
また授業内でのデータのやり取りなどでもGメールを使う事が多いので、必ず取得しておきましょう。

www.google.co.jp

www.google.com



タイピングスキルを身に付ける

必ずしもブラインドタッチを習得しなければいけない訳では無いですが、早くタイピング出来ると沢山のメリットがあります。授業でも入力作業はもちろんあります。入力作業にストレスを感じてしまうと授業全体にストレスを感じてしまうので、まずは入力作業にストレスを感じなくなる程度に慣れましょう。


www.code-drill.com

パソコンの使い方

まず最初にパソコンで覚える事はファイルとフォルダーの作成、及び使い方です。

  1. PCを使って働くのであれば、この記事の内容は必ず理解しなければいけない事です。とにかく読んで、意味の解らない箇所や語句を書き出してみましょう。
  2. 次に解らない箇所・語句をインターネットを使って調べてみましょう。「解らない事をインターネットを使って調べる」も必ず身に付けるべきスキルです。
  3. もちろんインターネットを使っても解らない事はあります。その場合は休み時間や授業後の自習時間などに講師や副講師に聞いてみましょう。



f:id:yachin29:20180906171143j:plain


ファイル

f:id:yachin29:20191010140751j:plain

ファイルとは画像や顧客の住所録といったデータの事で、そのソフト上でファイルを「保存」すると作成される。すでにあるファイルを開いて作業をして「保存」をすると、元あったファイルに上書き保存されるので、元のファイルも作ったファイルも両方保存したい場合は、「ファイル名」を変えて「保存」(別名保存)しなければならない。

ファイルの拡張子

ファイル名の最後のドット「.」から後ろの部分を拡張子と呼びます。例えば index.htm の拡張子は htm、cat.jpg の拡張子は jpg です。拡張子の種類によってそのファイルの種類が決まります。
PCによっては初期設定で拡張子を表示させないという設定になっているので、自宅のPCを確認してみましょう。

https://support.microsoft.com/ja-jp/help/978449



フォルダー

f:id:yachin29:20191010140809j:plain

フォルダーとは、作成したデータをまとめておく箱です。ファイルが増えると目的のファイルを見つけるのに苦労する為、日付別や用途別にフォルダーに分けて管理します。データの管理はパソコンを使う上で最も基本であり、最も大切な事なのでしっかりと覚えましょう。


ファイルとフォルダのちがいって?

パソコンの中には、デジタルカメラで撮(と)った写真、暑中見舞い(みまい)のハガキや住所録など、いろいろなデータが入っているよね。これらのデータのまとまりひとつひとつのことを「ファイル」っていうよ。ファイルには、それぞれ名前を付けられるし、写真や書類などの種類もわかるから、必要なときに探(さが)して表示(ひょうじ)したり、印刷したりできるよ。

けれど、作ったファイルをどんどんパソコンの中に保存(ほぞん)して、数がふえてくると、使いたいファイルがどこにあるのか見つけにくくなるよね。そこで、ファイルを分類して保存(ほぞん)するための“入れ物”、「フォルダ」を使うんだ。

たとえば、部屋の床(ゆか)いっぱいにオモチャや教科書が散らかっていると、探し物(さがしもの)がすぐには見つからないことがあるよね。けれど、教科書をしまうのは机(つくえ)の引き出し、オモチャをしまうのはオモチャ箱、のように“入れ物”を決めておけば、あとからすぐに見つけられるね。

同じように、パソコンでファイルを作ったら、写真のフォルダ、書類のフォルダなどに分類して保存(ほぞん)しておくといいよ。こうすれば、必要なファイルをすぐに見つけて、開くことができるんだ。

azby.fmworld.net




ファイルの作成から移動、コピーまで、Windowsパソコンの超基本操作 - 価格.comマガジン


azby.fmworld.net



画像をダウンロードしてみる

f:id:yachin29:20170810020015j:plain

ヒーローヘッダーを使ったサイト制作

f:id:yachin29:20170209004414j:plain



今回の制作のポイント

  • メインビジュアルはヒーローヘッダーでbxsliderを使ってフェードで見せる
  • お知らせ部分はajaxを使って外部データを読み込む
  • Movie部分にmp4データを設置
  • Menu部分にモーダルウィンドを設置(jQuery
  • Access部分にGoogleMapを設置
  • Form部分にGoogleAPIを使ってお問い合わせフォームを導入



最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
「ヒーローヘッダー」と呼ばれています。

ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。

2014年頃から海外のウェブデザインにてトレンド的にかなり増えてきている手法です。
巨大な画像により、イメージを強く植えつけることができる反面、写真のクオリティ次第でウェブサイト全体の印象を悪くすることも有りますので、フラットデザイン同様簡単そうでデザインセンスの問われるデザイン要素となっています。


参考サイト
http://racines-park.com/



ferret-plus.com


こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。

ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。

img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。



今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア(2019年~2020年)
f:id:yachin29:20200813002742p:plain



f:id:yachin29:20170512112150p:plain


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ヒーローヘッダーを使ったページ制作</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Cafe de Felica</h1>
</header>
<div class="key-visual">
<img src="img/01.jpg" alt="">
</div>
<nav class="g-nav">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Access</a></li>
</ul>
</nav>

<div class="box" id="video">
<h2>Video</h2>
<div class="video-inner">
<video src="img/Adler-60600.mp4" autoplay muted loop></video>
</div><!-- /.video-inner -->
</div><!-- /#video -->

<div class="box" id="menu">
<h2>Menu</h2>
<div class="menu-inner">
<p><img src="img/01.jpg" alt=""></p>
<p><img src="img/02.jpg" alt=""></p>
<p><img src="img/03.jpg" alt=""></p>
</div>
</div><!-- /#menu -->

<div class="box" id="info">
<h2>News</h2>
<dl class="news-list" id="list-box">

</dl>
</div><!-- /#info -->
<p id="to-top">
<a href="#">
<img src="img/to-top.svg" alt="">
</a>
</p>

<footer>
<p><small>&copy; Cade de FELICA</small></p>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$('#list-box').load('news.txt');

//#to-top>aをon.clickしたら
$('#to-top>a').on('click',function(){
$('html,body').animate({scrollTop:0},200);
});
});
</script>
</body>
</html>

style.css

@charset "utf-8";

:root{
--main-color: #972b56;
}

html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;/* フルードイメージ */
}

header{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 100px;
text-align: center;
}
h1{
color: var(--main-color);
background-color:rgba(255,255,255,0.5);
}
.key-visual{
width: 100%;
height: calc(100vh - 50px);
}
.key-visual>img{
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
.g-nav{
width: 100%;
height: 50px;
margin-bottom: 100px;
background-color: #FFF;
position: sticky;
top: 0;
z-index: 9999;
}
.g-nav>ul{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.g-nav li{
margin: 0 20px;
}
.g-nav a{
padding: 10px;
color: var(--main-color);
font-weight: bold;
}
.g-nav a:hover{
text-decoration: underline;
}
h2{
color: var(--main-color);
text-align: center;
font-size: 30px;
}
.video-inner{
max-width: 960px;
height: 400px;
margin: 100px auto;
}
video{
object-fit: cover;
width: 100%;
height: 100%;
}
.menu-inner{
max-width: 960px;
margin: 50px auto;
display: flex;
justify-content: space-between;
}
.menu-inner>p{
width: calc((100% - 40px) / 3);
overflow: hidden;
}
.menu-inner>p>img{
transition: 0.3s;
}
.menu-inner>p:hover>img{
transform: scale(1.2);
}
.news-list{
max-width: 800px;
margin: 0 auto 100px;
display: flex;
flex-wrap: wrap;
}
dt{
width: 30%;
margin-bottom: 20px;
border-bottom: 1px solid var(--main-color);
display: none;/* 非表示 */
}
dd{
width: 70%;
margin-bottom: 20px;
border-bottom: 1px solid var(--main-color);
padding-bottom: 10px;
display: none;/* 非表示 */
}
dt:nth-of-type(-n+4){
display: block;
}
dd:nth-of-type(-n+4){
display: block;
}
#to-top{
width: 50px;
height: 50px;
position: fixed;
right: 50px;
bottom: 140px;
}



footer{
height: 100px;
background-color: var(--main-color);
}
footer>p{
text-align: center;
line-height: 100px;
color: #FFF;
}

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。
「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」
などは、必ずデザイン部分に入る前に決めてしまいましょう。もちろん作る過程で多少変更はありますが、基本的には入れるべきコンテンツの種類・内容・順番が決まった段階で、ワイヤー・カンプに入ります。
この構成表はサイトマップとは違い、自分自身のサイト制作作業をスムーズに進める為に用意する物です。

サイトマップとは?

サイトマップとは、サイト全体のページ構成や、「どの様なコンテンツが入るか?」などを示すためのもので、サイト制作を進める上で無くてはならない物です。
サイトマップは大きく分けると、ユーザー用と検索エンジン用の2種類があります。


f:id:yachin29:20190911123540p:plain


構成表作成の手順

掲載させるコンテンツのグループ分け
いきなり、構成表を作るのでは無く、まずはそのWebサイトに必要なページを全て書き出してみましょう。この時は階層、カテゴリーなど関係なくとにかく思いつくままに。それが終わったらその中でグループ分けをします。


コンテンツの重要度をランク付け
コンテンツのグルーピングが終わったら、次はどの様な順番でページに載せていくかです。気をつけなければいけないのは、作る側やクライアントが「これは重要だ!」と思っているページでも、ユーザーにとって価値のあるコンテンツ・情報か、どうかをしっかりと見極めて、順番を決めましょう。また、コンテンツの順番はSEOとも関わってくるので、上位検索を考えている人はここで、必ず、「検索キーワード」を選定し、キーワードの内容も加味したランク付けを行いましょう。


ユーザーの利便性を考える
Webサイトの階層が深ければ深いほど、ユーザーは多くのリンクをクリックしなければなりません。要点をしぼってなるべく浅い階層(2〜3階層)を目指しましょう。また、ユーザーがどういう順番で情報を取得すると、ユーザーにとって便利なサイトになるか、などユーザー目線での導線作りを心がけましょう。





課題

自身で1つサイトを探して、自分なりに「サイトの構成表」を作ってみましょう。そしてクライアントワークのサイトの構成表も必ず作成しましょう。


f:id:yachin29:20171007194726p:plain

the-ringo.jp

上記のサイトの場合の例

コンテンツ構成表

ページ構成:5ページ

  1. Home:トップページ
  2. About
  3. Menu
  4. Party
  5. Contact
  6. Reservations(外部サイトへのリンク)
Homeページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. aboutの概要(aboutページへのリンクボタン)
  5. menuの概要(menuページのイメージ画像、Menuページへのリンクボタン)
  6. お店情報(お店情報のイメージ画像、Contactへのリンクボタン)
  7. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  8. 次ページ(aboutページ)へのリンク
  9. フッター(コピーライト、SNSリンク)
aboutページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. お店のコンセプト(店内などのイメージ画像)
  6. シェフの紹介(シェフの画像)
  7. SNSへのリンク
  8. 予約への誘導
  9. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  10. 次ページ(Menuページ)へのリンク
  11. フッター(コピーライト、SNSリンク)
Menuページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. シェフのご挨拶
  6. 料理5品の紹介・料理の画像付き
  7. シェフが料理しているイメージ画像
  8. 予約への誘導
  9. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  10. 次ページ(Partyページ)へのリンク
  11. フッター(コピーライト、SNSリンク)
Partyページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. 貸切パーティーについて
  6. プランの内容例を4例(人数、予算、要望に応じて変更可、という事を明記)
  7. 貸切パーティーの場合の細かい情報
  8. パーティーのイメージ画像
  9. 予約への誘導
  10. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  11. 次ページ(Contactページ)へのリンク
  12. フッター(コピーライト、SNSリンク)
Contactページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. アクセス(住所、最寄駅からの情報、マップ)
  6. 営業時間
  7. 予約への誘導
  8. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  9. 次ページ(Homeページ)へのリンク
  10. フッター(コピーライト、SNSリンク)

新しいスキルを身に着ける

授業も残り3週間になりました。残りの期間はとにかく今まで授業でインプットして来た物をポートフォリオという形でアウトプットしていきます。
けれど、ただ漠然とポートフォリオを作るというのも難しいので、目標となる物(入りたい会社や仕事でやりたい事)をしっかりとイメージし、そこに行くにはどういった物が必要か?、どういった道筋で辿り着きたいのか?、なんかを考えると、今やるべき事が見えてきます。


未経験から就職する為に必要なスキルは授業内でやっている事で充分ですが、さらにその先を見据えた場合、学ぶべきスキルはまだまだあります。仕事を始めると日々の仕事に追われ、なかなか新しいスキルを勉強する機会が持てないので、今の内に興味ある事の勉強を始めておきましょう。


webデザイナー

以前授業で話したようにweb広告の分野はまだまだ伸びていく余地は充分あります。さらに最近はバナーやLPなどのweb広告にもリッチなアニメーション(動画も含む)が積極的に使われているので、そういったリッチなバナーやLPの制作やさらにはXdやsketchといったプロトタイプツールで動きのあるカンプ作成も必須になりつつあるので、その辺のツールを積極的に触ってみましょう。


helpx.adobe.com



helpx.adobe.com



Adobe XDで3分でwebサイトデザインしてみた!初心者ができるチート技紹介



フロントエンドエンジニア

フロントエンドの場合、入った会社や参加しているプロジェクト毎に使っている言語やツールは様々なので、これさえ覚えればOK!という物は無いのですが、どの現場でも必ず使われているものはgitです。なので、github等を使って基本的なgitコマンドを覚えましょう。
また最近の傾向として、大規模案件の場合、タスクランナーを使って作業の自動化や省人化が図られているので、次のステップとしてgulpなどのタスクランナーやwebpack(ウェブパック)等のモジュールバンドラーの考え方を覚えましょう。
また、最近のトレンドとしてはjavascriptフレームワークであるvue.jsやReactなどを使った運用が行われています。


scrapbox.io


microcms.io


ja.nuxtjs.org


digitalidentity.co.jp



webディレクター

ディレクターはビジネスマナーや進行管理非常に多くのスキルが求められます。web全般の知識やパワーポイントやエクセルといったoffice ソフトのスキルなども必要になって来ます。



webtan.impress.co.jp


www.itpassportsiken.com