もちろん、常に最新のトレンドを入れなければいけない訳では無いですが、やはり見る事、知る事は非常に大事です。
下記のブログでは、最新のトレンドとして主に5点のポイントを上げています。
1. ブラウザいっぱいに表示して、スクロール無し
2. 固定表示は見出しをサイドに
3. ロゴをローダーとして使う
4. 今までは違った背景の使い方
5. 圧倒させるアニメーション
この中には非常に難しい技術が使われている物もありますが、すぐに真似できる面白いアイデアもあります。
「いいな」と思った物は自身の制作物にどんどん取り入れていきましょう。
解説ブログ
coliss.com
illustratorで作ったカンプを実際にコーディングしてみましょう。
要素や文字の大きさや色、マージンなどの値もカンプのデータをベースに作っていきます。しかし、全てカンプと完全に同じに作っていくのは非常に難しいので、コーディング段階での微調整は必要です。
各要素の値を確認する時はillustratorのカンプデータの確認したい要素を選択して、変形の情報を元にコーディングして行きましょう。
HTMLで1番大事なのはアウトライン構造です。どういうレイアウトにするにしろ、まずは自分がどういうアウトライン構造を作るべきかを考え、それに応じたマークアップをしていきます。レイアウト優先では無く正しい文章構造を意識してマークアップしていきます。
授業ではフロートの回り込み解除の方法として主にoverflow:hiddenを使用して来ましたが、overflow:hiddenを指定する為だけの要素はレスポンシブレイアウトを考えると邪魔になる場合があるので、場合によってはclearが必要なケースも出て来ます。
まずはPCレイアウトのみを考えたレイアウトを作って行きましょう。PCレイアウトのみで考えるとそんなに複雑な作りではないので、もちろん今までの授業で習ったプロパティだけで作る事が出来ます。ここで出てくる基本的なプロパティをしっかりと理解すれば基本的なレイアウトは自由につくれるようになります。
レイアウト関係
width
height
margin
padding
float
position
background
display
overflow
clear
border
box-sizing
テキスト関係
font-size
font-weight
text-align
line-height
思い通りにレイアウト出来ない場合は要素に背景色を指定し、実際にその要素がどういう状態か可視化出来るようにして確認するのがコツです。
HTMLの例
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Cotorier Cafe</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header> <h1>Cotorier Cafe</h1> <p class="text">毎日のおいしいごはんとおまけをすこし</p> <p class="logo"><img src="img/logo.jpg" alt=""></p> <nav> <ul> <li><a href="#">お店のこと</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </header> <div id="main"> <p id="mainImg"><img src="img/main.jpg" alt=""></p> <div id="mainTaxt"> <h2>毎日食べたい、<br>おうちみたいなごはんやおやつ</h2> <p class="textInfo">Cotorier Cafe（コトリエ カフェ）は、あなたのもうひとつの「おうち」に なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、 「ただいま」を心よりお待ちしています。</p> <p id="mainShop"><a href="#">お店について</a></p> </div> </div> <div id="menu"> <div id="menuInner"> <h3>おすすめメニュー</h3> <p id="all"><a href="#">すべてのメニュー</a></p> </div> <div id="menuPhoto"> <div class="menuFood"> <h4>日替わりごはんセット</h4> <p class="photo"><img src="img/photo1.jpg" alt="#"></p> <p class="photoText">春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら</p> </div> <div class="menuFood"> <h4>週替わりカレー</h4> <p class="photo"><img src="img/photo2.jpg" alt="#"></p> <p class="photoText">甘辛たけのこカレー ゆでたまごつき</p> </div> <div class="menuFood"> <h4>季節のおやつ</h4> <p class="photo"><img src="img/photo3.jpg" alt="#"></p> <p class="photoText">西か東か！さくらもち食べ比べ対決セット</p> </div> <div class="menuFood"> <h4>ひとくち晩酌</h4> <p class="photo"><img src="img/photo4.jpg" alt="#"></p> <p class="photoText">今だけ！いちごごろごろサングリア</p> </div> </div> </div> <div id="info"> <div id="infoShop"> <h3>お店からのお知らせ</h3> <dl> <dt>■ 2016-04-22</dt> <dd>ゴールデンウィークの営業について</dd> <dt>■ 2016-04-21</dt> <dd>今週の日替わりメニュー（4/21 - 4/26)</dd> <dt>■ 2016-04-14</dt> <dd>今週の日替わりメニュー（４14 - 4/19）</dd> <dt>■ 2016-04-10</dt> <dd>春限定のおやつがスタートしました！</dd> </dl> </div> <div id="sns"> <p>こちらもどうぞ</p> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Pinterest</a></li> <li><a href="#">Blog</a></li> </ul> </div> </div> <div id="access"> <h3>店舗情報</h3> <h4>地図・アクセス方法</h4> <dl> <dt>住所</dt> <dd>東京都杉並区高円寺南7丁目7-4 ことりやビル２F<br>(東京メトロ丸ノ内線新高円寺駅から徒歩7分)</dd> <dt>営業時間</dt><dd>11:00 - 23:30（L.O. 23:00）<br>ランチタイム：11:00 - 15:00（L.O. 14:30）</dd> <dt>電話</dt><dd>03-0000-0000</dd> <dt>定休日</dt><dd>日曜日・祝日</dd> </dl> </div> <footer> <p><small>Copyright© Cotorier Cafe. All rights Reserved.</small></p> </footer> </div> </div></body> </html>
Webサイトを制作するうえで、実際に今のwebサイトにはどういう見せ方・動きがあるのかを知る、という事はとても大事です。
PCサイトのUIデザインにおける12のトレンド | sogilog
サイト制作の勉強をする際にインターネット上から情報を得る、という事も非常に大事です。
中でも海外の情報をいち早く紹介してくれているようなブログは重宝します。
もちろん、サイト自体を見る事もとても勉強になるので１つでも多くのサイト見て、さらにソースを見る癖もつけましょう。
ポートフォリオに特化したギャラリーサイト
foliofocus.com
イギリスの制作会社のポートフォリオサイト
物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター（PC）は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。
今までのようにユーザーとしての使い方では無く、制作者としての使い方を覚えていきましょう。
ブラウザーとは？
ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ（ブラウザー）と呼んだ場合、多くはウェブブラウザのことを指す。
授業ではFirefoxとGoogle Chromeの2つのブラウザーを主に使用していきます。
非営利団体である「Mozilla Foundation」が開発したブラウザー。
Web開発に適したアドオンと呼ばれる追加機能が豊富。最新のHTML5とCSS3による表示が可能。
www.mozilla.org
Googleが開発しているブラウザーでGoogleアカウントと同期する事で様々な拡張が可能。
世界的に見るとシェアNo1ブラウザー。最新のHTML5とCSS3による表示が可能。
www.google.co.jp
日本では長年ダントツのシェアを占めていたが、以前から不具合が多くweb制作者にとって悩みのタネでした。
最近は事情も変わって場合によってはIE未対応でOKの場合も出て来ています。
検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。
例（池袋 カフェ）
一番使われている方法で２つ以上のキーワードを入力して検索精度を上げることができます。
キーワード間に一文字分のスペース （半角、全角どちらでも可） を入れる。
例（マイケル・ジャクソン OR Michael Jackson）
たとえばマイケル・ジャクソンを調べるときに日本語で「マイケル・ジャクソン」と表記したサイトと英語で「Michael Jackson」と表記した２種類があり場合に、そのどちらも検索結果に出したい場合などに使うのが「OR」検索です。
キーワードを半角大文字「OR」、もしくはパイプ「|」で区切り、その前後には半角スペースを入れます。
例（iphone5c-5s）
たくさんの検索結果が出る時「この情報はいらないな」というキーワードがあると思います。
そんな時に使うのがこの「マイナス」検索です。
検索したい語句をダブルクォーテーション "" で囲むと、そのままのフレーズで検索できます。
Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。
ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。
スマートフォンを考慮したWEBサイト
www.hatchsf.com
アニメーションを使ったWEBサイト
www.teamgeek.co.za
動画を使ったWEBサイト
couleecreative.com
http://www.thechedi-andermatt.com/de/
UXを意識したWEBサイト
www.configuratuvw.mx
FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて１つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。
ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール（英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。
無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。
Google ウェブマスター向け公式ブログ: 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス
pushStateとは、HTML5でサポートされるAPIです。
ページを遷移せずHTML（の一部）を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです（#以下が入れ替わるだけで一意のURLとして処理しない）。
ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。
本当に前のページに戻ってしまいます。なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。
しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。
つまり検索エンジンにとってクロール・インデックスしやすくなります。
Googleの記事では、無限スクロールは次々にページを捲っていく事と同じとしている。そのため、無限スクロールで新しいコンテンツが表示される度にブラウザの履歴（URL）を更新しなければいけない。さらにスクロールでページを進んだり戻ったりする度にURLを更新させる必要があります。
さらにJavaScriptが切れている状態でも手動でページ遷移出来るような設定も取り入れ、検索エンジンとの相性を考慮した無限スクロールにカスタマイズしましょう。
