WEBサイト制作の勉強

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

サイト制作のワークフロー

webサイト制作におけるワークフローの一例

f:id:yachin29:20161020200618p:plain

ヒアリング

クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかりとクライアントのいう事に耳を向け、クライアントの要望を言語化する必要があります。

サイト設計

ヒアリングであがったコンテンツの洗いだしを行い、これらをグルーピングしフローチャートサイトマップ)と呼ばれるページの遷移の画面に視覚化し、まとめます。

ラフデザイン・ワイヤーフレームの作成

各ページの画面に盛り込む内容を検討し、まずは手書きのラフで良いので、全体のレイアウトなどを考え、次にIllustrator等のソフトを使って「ワイヤーフレーム」と呼ばれる線画に起こします。

カンプ制作

カンプとは「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味があります。カンプの段階でカラースキム(配色計画)・寸法をしっかりと考えながら図面に起こし、デザインやレイアウトも含めた全体像を作ることで完成品のイメージを把握出来るものを作成します。いわばwebサイトの設計図です。

スライス・コーディング

webサイトの設計図であるカンプを元に細かくパーツ別にわけ(スライス)、コーディングをしてサイトを組み立てます。

動的プログラムの導入

プログラムを導入する意図を明確にし、ユーザビリティーの高いサイトを作るよう心がけましょう。

検証

仮サーバーにアップして、リンクやユーザービリティなどを検証します。

プレゼンテーション

1人1人、プレゼンテーションを行ってもらいます。

画像の作成

header画像の作成

photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。
f:id:yachin29:20090609115035j:plain


f:id:yachin29:20151008200723p:plain


使用するテキスト

Café Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café Italia Restaurant on Zomato.


使用素材
f:id:yachin29:20170802161850j:plain










f:id:yachin29:20170323170819j:plain


子牛のステーキ アスパラガス添え

しっとりと柔らかで脂肪分の少ない仔牛のサーロイン(背肉)の芯をスジを取り除き100gのステーキにカットしました。とても柔らかく上品な風味があり、仔牛の美味しさを堪能いただける品!フランス最古の牛と言われるシャロレー牛は世界でも最高級といわれ、とっても貴重とされています。お肉の美味しさそのままに氷点熟成し、急速に液体凍結していますので解凍してそのままお使いいただけます。

ナビゲーションボタンの作成

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ナビゲーションボタンの作成</title>
<style>
html,body,ul,li {
margin:0;
padding:0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
color:#222;
}
.g-nav>ul {
display:flex;
width:800px;
margin:50px auto 0;
}
.g-nav li {
width:200px;
height:50px;
}
li>a {
display:block;
background:#BFBFBF url(img/01.jpg) no-repeat;
line-height:50px;
text-align:center;
border-right:1px solid #FFF;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
li:nth-child(2)>a {
background:#BFBFBF url(img/02.jpg) no-repeat;
}
li:nth-child(3)>a {
background:#BFBFBF url(img/03.jpg) no-repeat;
}
li:nth-child(4)>a {
background:#BFBFBF url(img/04.jpg) no-repeat;
}
li>a:hover {
background:#F39495 url(img/01h.jpg) no-repeat;
}
li:nth-child(2)>a:hover {
background:#F39495 url(img/02h.jpg) no-repeat;
}
li:nth-child(3)>a:hover {
background:#F39495 url(img/03h.jpg) no-repeat;
}
li:nth-child(4)>a:hover {
background:#F39495 url(img/04h.jpg) no-repeat;
}
li:last-child>a {
border-right:0;
}
</style>
</head>

<body>
<nav class="g-nav">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</nav>
</body>
</html>

HTMLの復習

ホテル・フェリカ池袋



シングル・スタンダードルーム
最上階12階に位置し、「シンプルさの中のさりげない上質感」をコンセプトとした、ゆっくりくつろげるお部屋です。



シングルルームの見取り図
f:id:yachin29:20160307135646g:plain




ツイン・スタンダードルーム
上層階に位置しスタイリッシュな内装とグループやファミリーの滞在に便利なアメニティをそろえています。

ツインルームの見取り図
f:id:yachin29:20160307135652g:plain



共通室内設備

Wi-Fi
加湿空気清浄機
液晶テレビ
冷蔵庫

Photoshopでのマスク処理

画像のマスク処理

f:id:yachin29:20151002001709j:plain
マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。



Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分けることによって、より効率的にデザインをすることが可能です。


クリッピングマスク

f:id:yachin29:20151002002549j:plain

クリッピングマスクは、切り抜きをしたいレイヤーのすぐ下にあるレイヤーの形に切り抜くことができます。
切り抜きは、文字でも図形でも手書きの図形でも可能です。
クリッピングマスクを作る場合は、レイヤーの順番に注意が必要です。

  • 切り抜きたいレイヤーが上
  • 切り抜きたい形が下のレイヤー

レイヤーマスク

選択範囲からマスクを作成します。
ブラシ・消しゴムなどでマスクの形を変更できるため、細かい微調整をしたい場合に向いています。
また、グラデーションツールを使う事で、徐々に変わる画像合成などが可能です。


f:id:yachin29:20151002010808p:plain



liginc.co.jp

Photoshop 基礎

Photoshopの基本的な使い方

Photoshopで行う作業は大きく別けると以下の3つ

  • 画像を作る。
  • 画像を補正する。
  • 画像を加工する。

Photoshopの初期化
目的は、無駄に消費されているメモリの記憶をリセットすること。
アイコンをダブルクリック等で起動。
このとき[Ctrl]+[Alt]+[Shift]を押したままに。
Adobe Photoshop設定ファイルを削除しますか?」とダイアログがでる。

  • カラー設定は「Web・インターネット用 - 日本」
  • 環境設定で注意する所は「単位・定規」Webは必ずPixelに。
  • ヒストリーの数を増やすと便利だが、増やし過ぎるとメモリーが足りなくなる。


・選択範囲を取る

  • 選択ツール
  • 自動選択ツール
  • マグネット選択ツール

などで選択範囲を取る。
微調整はクイックマスクモードで作業する。




・画像間の移動
別のファイルに選択範囲を切り取って移動

  1. 「練習_1」→「sky.psd」と「ダッキー.psd」を開く。
  2. 「ダッキー.psd」の中から選択範囲を決める。
  3. 「選択ツール」で選択範囲を「tsky.psd」の画面の上に移動する。
  4. ダッキーちゃんをちょうど良い大きさに「自由変形」で変更する。




ビネット効果



f:id:yachin29:20180910202130p:plain


素材
http://felica29.starfree.jp/Web_Photoshop.zip

作業効率が劇的に上がる! ショートカットキー早見表

作業効率を上げる為にはショートカットキーを覚える事が非常に大事です。
ただ、よく使うショートカットキーは自然と覚えるものの、普段余り使わない物は忘れがちです。その都度調べていてはそれこそ時間のムダになってしまうので、こういった早見表をPCの隣に置いておくのも非常に良いと思います。

Photoshopショートカットキー早見表 2015年版

f:id:yachin29:20160929124446j:plain

helpx.adobe.com


Illustratorのショートカットキー早見表 2015年版

f:id:yachin29:20160929125206j:plain

helpx.adobe.com