Embed Size (px)
Citation preview
自己紹介
瀬口 理恵Seguchi Rie
1983年大阪生まれ。 5DG-Five Dimension Graphics-代表、デジタルハリウッド大阪校講師。 約7年間制作会社などでウェブデザイナー、ディレクターを経て2010年に独立。 ウェブサイト制作やアプリUIデザインなどを手がける。女性向けデザインが得意。 隔週火曜のUstream番組「rie'sCafebar」パーソナリティーとして放送中。 著書『人を惹きつける美しいウェブサイトの作り方』（SBクリエイティブ）。 !制作環境はMac、Photoshopが好きです。
アジェンダ
アジェンダ
WEBデザイントレンド201501.02.03.04. おわりに
ガーリーデザイン実践
いまどきコーディング実践
アジェンダ
アジェンダ
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
カラムレイアウトから
シングルページへ
トレンド2015
カードレイアウト、動画背景、ゴーストボタン etc…
トレンド2015
タイポグラフィデザイン（ただし日本語は厳しい）
アジェンダ
アジェンダ
WEBデザイントレンド201501.02.03.04. おわりに
ガーリーデザイン実践
いまどきコーディング実践
「手書き風デザイン」は本当に手書きでやる
デザイン実践
iPad Pro + Apple Pencilで描きました (ペンで紙に描いてスキャンでも液タブでもOK)
1
配色はそのままPhotoshopにスウォッチとして登録
デザイン実践
ウェブ配色は最初に使う「６色」を決める2
Color Trends + Palettes :: COLOURlovers http://www.colourlovers.com/
配色を助けるサイト
デザイン実践
◯ ドット、チェック、ストライプなどのパターン
◯ 優しいテクスチャ(紙や布で淡目のもの)
デザイン実践
女子っぽいデザインにはテクスチャとパターンを用意する3
オススメ！シンプルパターン研究所 from YUKIさん
http://labo.v-colors.com/
実線
かすれ線
デザイン実践
かすれ線を一瞬で作る4
角丸長方形ツールで角丸四角形を描きます（塗り：白／線：茶色）
デザイン実践
角丸四角形が選択された状態で、ブラシツールのブラシライブラリから「アート_ 木炭・鉛筆」の「鉛筆（大）」を選びます
デザイン実践
ライブラリから「鉛筆（大）」を選んだところです。 簡単に手描き風の線が描けました！
デザイン実践
アジェンダ
アジェンダ
WEBデザイントレンド201501.02.03.04. おわりに
ガーリーデザイン実践
いまどきコーディング実践
Retina対応
普通のPCモニタ画面 Retinaディスプレイ端末
2倍サイズで画像を作っておかないとぼやけた画像に・・・
コーディング実践
「retina.js」おすすめ
自動判別で通常画像と高解像度画像を入れ替え表示します
http://imulus.github.io/retinajs/
コーディング実践
「retina.js」おすすめ
mainpict.jpg ←通常画像 [email protected] ←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収録(商用利用可)
アイコンと、カラースウォッチ集もついてます!
サンプルサイト一例
書籍紹介
