恒例の“田植え”を通して地域交流 ・7月21(日)に「海まちフェス … · に気がついたときは、ただちに周りの人と安全な場所に避難するよ
141219 まにフェス
Transcript of 141219 まにフェス
![Page 1: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/1.jpg)
![Page 2: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/2.jpg)
自己紹介
瀬口 理恵Seguchi Rie
1983年大阪生まれ。 5DG-Five Dimension Graphics-代表、デジタルハリウッド大阪校講師。 約7年間制作会社などでウェブデザイナー、ディレクターを経て2010年に独立。 ウェブサイト制作やアプリUIデザインなどを手がける。女性向けデザインが得意。 隔週火曜のUstream番組「rie'sCafebar」パーソナリティーとして放送中。 著書『人を惹きつける美しいウェブサイトの作り方』(SBクリエイティブ)。 !制作環境はMac、Photoshopが好きです。
![Page 3: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/3.jpg)
アジェンダ
アジェンダ
WEBデザイントレンド201501.02.03.04. おわりに
ガーリーデザイン実践
いまどきコーディング実践
![Page 4: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/4.jpg)
アジェンダ
アジェンダ
WEBデザイントレンド201501.02.03.04. おわりに
ガーリーデザイン実践
いまどきコーディング実践
![Page 5: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/5.jpg)
本当にやってきた!スマートフォン元年
トレンド2015
by Sebastiaan ter Burg
![Page 6: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/6.jpg)
スマートフォンの国内普及率は49.7%
トレンド2015
http://consult.nikkeibp.co.jp/news/2015/0831sp/
![Page 7: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/7.jpg)
スマートフォン対応は 「本当に」必須の時代へ
トレンド2015
![Page 8: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/8.jpg)
トレンド2015
ファーストビューからスクロール重視へ
ファーストビュー 700px以内程度に 重要事項を収める
![Page 9: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/9.jpg)
トレンド2015
ファーストビューからスクロール重視へ
ユーザーにスクロール させることが前提
![Page 10: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/10.jpg)
トレンド2015
カラムレイアウトから
シングルページへ
![Page 11: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/11.jpg)
トレンド2015
カラムレイアウトから
シングルページへ
![Page 12: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/12.jpg)
トレンド2015
カードレイアウト、動画背景、ゴーストボタン etc…
![Page 13: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/13.jpg)
トレンド2015
タイポグラフィデザイン(ただし日本語は厳しい)
![Page 14: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/14.jpg)
アジェンダ
アジェンダ
WEBデザイントレンド201501.02.03.04. おわりに
ガーリーデザイン実践
いまどきコーディング実践
![Page 15: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/15.jpg)
「手書き風デザイン」は本当に手書きでやる
デザイン実践
iPad Pro + Apple Pencilで描きました (ペンで紙に描いてスキャンでも液タブでもOK)
1
![Page 16: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/16.jpg)
配色はそのままPhotoshopにスウォッチとして登録
デザイン実践
ウェブ配色は最初に使う「6色」を決める2
![Page 17: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/17.jpg)
Color Trends + Palettes :: COLOURlovers http://www.colourlovers.com/
配色を助けるサイト
デザイン実践
![Page 18: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/18.jpg)
◯ ドット、チェック、ストライプなどのパターン
◯ 優しいテクスチャ(紙や布で淡目のもの)
デザイン実践
女子っぽいデザインにはテクスチャとパターンを用意する3
オススメ!シンプルパターン研究所 from YUKIさん
http://labo.v-colors.com/
![Page 19: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/19.jpg)
実線
かすれ線
デザイン実践
かすれ線を一瞬で作る4
![Page 20: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/20.jpg)
角丸長方形ツールで角丸四角形を描きます(塗り:白/線:茶色)
デザイン実践
![Page 21: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/21.jpg)
角丸四角形が選択された状態で、ブラシツールのブラシライブラリから「アート_ 木炭・鉛筆」の「鉛筆(大)」を選びます
デザイン実践
![Page 22: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/22.jpg)
ライブラリから「鉛筆(大)」を選んだところです。 簡単に手描き風の線が描けました!
デザイン実践
![Page 23: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/23.jpg)
アジェンダ
アジェンダ
WEBデザイントレンド201501.02.03.04. おわりに
ガーリーデザイン実践
いまどきコーディング実践
![Page 24: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/24.jpg)
Retina対応
普通のPCモニタ画面 Retinaディスプレイ端末
2倍サイズで画像を作っておかないとぼやけた画像に・・・
コーディング実践
![Page 25: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/25.jpg)
「retina.js」おすすめ
自動判別で通常画像と高解像度画像を入れ替え表示します
http://imulus.github.io/retinajs/
コーディング実践
![Page 26: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/26.jpg)
「retina.js」おすすめ
mainpict.jpg ←通常画像 [email protected] ←Retinaディスプレイ用高解像度画像
通常画像と同じ階層に「同じ名前+【@2x】」のファイル名で画像を置くと、Retinaディスプレイの場合のみ画像を入れ替えてくれます。
<script type="text/javascript" src="js/retina.js"></script><head></head>の間に読み込んで使う
コーディング実践
![Page 27: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/27.jpg)
コーディング実践
レスポンシブサイト構築をみてみよう
![Page 28: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/28.jpg)
コーディング実践
IE8対応は今後必要なくなりそう
参考: Internet Explorerのサポートが変わる2016年1月12日 アップデートが必要にhttp://news.livedoor.com/article/detail/10855902/
Google Codeも終了へ・・・
参考: Google Codeが終了→html5shivでIE8のHTML5対応している人は注意!http://dtp.jdash.info/archives/Cant_Load_html5shiv_from_Google_Code
![Page 29: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/29.jpg)
コーディング実践
メディアクエリ1つのHTMLファイルをCSSで制御し、 異なる画面のサイズでページのレイアウト・デザインを調整
![Page 30: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/30.jpg)
コーディング実践
ブレイクポイントを決めよう
ブレイクポイントとは、CSSが切り替わる画面幅のこと メディアクエリを使うときに、「どこのサイズで表示を変えるか」のポイント
![Page 31: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/31.jpg)
コーディング実践
PC 1000px 以上~(コンテンツは1000px幅で収まるように作成)
タブレット 999px ~ 768px(代表的なiPadの縦サイズを考慮)
スマートフォン 767px 以下~(iPhone6 Plus横向きはタブレット扱い)
![Page 32: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/32.jpg)
アジェンダ
アジェンダ
WEBデザイントレンド201501.02.03.04.
ガーリーデザイン実践
いまどきコーディング実践
おわりに
![Page 33: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/33.jpg)
書籍紹介
・高級温泉旅館 ・エステサロン ・コーポレート ・ネイルサロン ・カフェ ・ファッションEC ・英会話スクール
全7ジャンルのサンプルサイトとその解説
![Page 34: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/34.jpg)
書籍紹介
作例はPhotoshopデータ、htmlデータ 共に全て付録CD収録(商用利用可)
アイコンと、カラースウォッチ集もついてます!
![Page 35: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/35.jpg)
サンプルサイト一例
書籍紹介
![Page 36: 141219 まにフェス](https://reader031.fdocument.pub/reader031/viewer/2022021919/587f9bda1a28ab825e8b5055/html5/thumbnails/36.jpg)