141219 まにフェス

自己紹介
瀬口理恵
Seguchi Rie
1983年大阪生まれ。
5DG-Five Dimension Graphics-代表、デジタルハリウッド大阪校講師。
約7年間制作会社などでウェブデザイナー、ディレクターを経て2010年に独立。
ウェブサイト制作やアプリUIデザインなどを手がける。女性向けデザインが得意。
隔週火曜のUstream番組「rie'sCafebar」パーソナリティーとして放送中。
著書『人を惹きつける美しいウェブサイトの作り方』（SBクリエイティブ）。
!
制作環境はMac、Photoshopが好きです。

アジェンダ
アジェンダ
WEBデザイントレンド201501.
02.
03.
04. おわりに
ガーリーデザイン実践
いまどきコーディング実践

本当にやってきた！スマートフォン元年
トレンド2015
by Sebastiaan ter Burg

スマートフォンの国内普及率は49.7％
トレンド2015
http://consult.nikkeibp.co.jp/news/2015/0831sp/

スマートフォン対応は
「本当に」必須の時代へ
トレンド2015

トレンド2015
ファーストビューからスクロール重視へ
ファーストビュー
700px以内程度に
重要事項を収める

トレンド2015
ファーストビューからスクロール重視へ
ユーザーにスクロール
させることが前提

トレンド2015
カラムレイアウト
から
シングルページへ

トレンド2015
カードレイアウト、動画背景、ゴーストボタン etc…

トレンド2015
タイポグラフィデザイン（ただし日本語は厳しい）

「手書き風デザイン」は本当に手書きでやる
デザイン実践
iPad Pro + Apple Pencilで描きました
(ペンで紙に描いてスキャンでも液タブでもOK)
1

配色はそのままPhotoshopにスウォッチとして登録
デザイン実践
ウェブ配色は最初に使う「６色」を決める2

Color Trends + Palettes :: COLOURlovers
http://www.colourlovers.com/
配色を助けるサイト
デザイン実践

⃝ ドット、チェック、ストライプなどのパターン
⃝ 優しいテクスチャ(紙や布で淡目のもの)
デザイン実践
女子っぽいデザインにはテクスチャとパターンを用意する3
オススメ！シンプルパターン研究所
fromYUKIさん
http://labo.v-colors.com/

実線
かすれ線
デザイン実践
かすれ線を一瞬で作る4

角丸長方形ツールで角丸四角形を描きます（塗り：白／線：茶色）
デザイン実践

角丸四角形が選択された状態で、ブラシツールのブラシライブラリか
ら「アート_ 木炭・鉛筆」の「鉛筆（大）」を選びます
デザイン実践

ライブラリから「鉛筆（大）」を選んだところです。
簡単に手描き風の線が描けました！
デザイン実践

Retina対応
普通のPCモニタ画面 Retinaディスプレイ端末
2倍サイズで画像を作っておかないとぼやけた画像に・・・
コーディング実践

「retina.js」おすすめ
自動判別で通常画像と高解像度画像を入れ替え表示します
http://imulus.github.io/retinajs/

「retina.js」おすすめ
mainpict.jpg ←通常画像
mainpict@2x.jpg ←Retinaディスプレイ用高解像度画像
通常画像と同じ階層に「同じ名前＋【@2x】」のファイル名で画像を置くと、
Retinaディスプレイの場合のみ画像を入れ替えてくれます。
<script type="text/javascript" src="js/retina.js"></script>
<head></head>の間に読み込んで使う

レスポンシブサイト構築をみてみよう

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

メディアクエリ
1つのHTMLファイルをCSSで制御し、
異なる画面のサイズでページのレイアウト・デザインを調整

ブレイクポイントを決めよう
ブレイクポイントとは、CSSが切り替わる画面幅のこと
メディアクエリを使うときに、「どこのサイズで表示を変えるか」のポイント

PC
1000px 以上∼（コンテンツは1000px幅で収まるように作成）
タブレット
999px ∼ 768px（代表的なiPadの縦サイズを考慮）
スマートフォン
767px 以下∼（iPhone6 Plus横向きはタブレット扱い）

アジェンダ
アジェンダ
WEBデザイントレンド201501.
02.
03.
04.
ガーリーデザイン実践
いまどきコーディング実践
おわりに

書籍紹介
・高級温泉旅館
・エステサロン
・コーポレート
・ネイルサロン
・カフェ
・ファッションEC
・英会話スクール
全７ジャンルのサンプルサイトとその解説

書籍紹介
作例はPhotoshopデータ、htmlデータ
共に全て付録CD収録(商用利用可)
アイコンと、カラースウォッチ集もついてます!

サンプルサイト一例
書籍紹介

141219 まにフェス

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (20)

Similar to 141219 まにフェス

Similar to 141219 まにフェス (20)

More from rie05

More from rie05 (6)

141219 まにフェス