HONEBITOサイトの作り方～honebito.net～

∼ HONEBITO サイトの作り方∼
2014.05.10 名古屋 Webk 交流会発表用
リバース
honebito.net

【サイト概要】
Web クリエイター HONEBITO サイトの
リニューアル制作。
他ジャンルのクリエイターとのつながりを
作ることを目的としたポートフォリオサイト。

【サイト構成図】
TOP
Proﬁle
Web Animation アプリ
Link 問い合わせ
フォーム
Site / Flash
制作実績
制作実績制作講義work
work
work
個別作品ページ

【今回紹介する技術】
(1) レスポンシブ Web デザイン (RWD)
(2) シンボルフォント
(3)HTML5 アニメーション [Adobe Edge Animate]

【(1) レスポンシブウェブデザイン (RWD)】
[ レスポンシブ Web デザイン】
（RWD:Responsive Web Design）
[PC、タブレット、スマートフォンなど、
あらゆるデバイスに最適化した Web サイトを
単一の HTML で実現する制作手法 ] のこと。

RWD の実装方法は、
[ メディアクエリー ]、[Javascript での制御方法 ] 等
今回は [ メディアクエリー ] ベースでサイトを制作。
[ メディアクエリー記述例 ]
@media only screen and (min-width: 800px){
…
}
@media (min-width: 521px) and (max-width: 799px){
…
｝

[ ブレイクポイント ]
( 画面レイアウトを大きく切り替える画面幅 )
→ 800px/520px の 2 つ

【(RWD) メイン画面レイアウト】
#wrapper
header
mainvisual
nav
footer
#content
#contentinner
article
aside
PC

【(RWD) メイン画面レイアウト】
#wrapper
header
mainvisual
nav
footer
#content
#contentinner
article
aside
Tablet
#wrapper
header
mainvisual
nav
footer
#content
#contentinner
article
aside
Smartfon

サイトイメージ【PC 閲覧時（TOP）】

サイトイメージ【Tablet 閲覧時（TOP）】

サイトイメージ【SmartPhone 閲覧時（TOP）】

RWD で制作してみて、一番感じたこと
【絶対配置との共存が難しい】
( 基本全要素 % 指定で可変なため )
あまり絶対配置を多用した複雑なレイアウトではなく、
グリッドレイアウトで簡単に要素の幅や配置を変えられる
構成が適している

【参考サイト】
【参考書籍】
[ ゼロから始めるレスポンシブ Web デザイン入門 ]
http://ascii.jp/elem/000/000/697/697463/
[ レスポンシブ Web デザイン入門マルチデバイス時代の Web デザイン手法 ]
の中の [ 固定幅＋フルードグリッドレイアウト ]
http://p.tl/sM6B

【(2) シンボルフォント】
[ シンボルフォント】
通常の文字のフォントではなく、図形のフォント
honebito.net のシンボルフォント

[ シンボルフォントを使うメリット ]
○フォントなので、ベクター形式で拡大しても荒れずに
綺麗に表示可能
○フォントなので、CSS での色・サイズ・シャドウ等
の装飾が通常フォントと同様に可能
○フォントなので、画像よりも軽い

[ シンボルフォントを Web サイトで使用する方法 ]
(1)Illustrator でオリジナルのアイコンを作成し、
SVG 形式で保存
(2)[IcoMoon] を利用して作成した SVG 形式のファイル
をアップロード
[icoMoon: http://icomoon.io/app/]

【参考サイト】
[Retina でもボケない「シンボルアイコン」を使いこなそう！ ]
http://liginc.co.jp/designer/archives/10334
[ 無料で出来る！オリジナルアイコンフォントを作ってみよう ]
http://liginc.co.jp/web/design/font/33237

【(3)HTML5 アニメーション [Adobe Edge Animate]】
[HTML5 アニメーション】
（Adobe Edge Animate 使用）
Adobe Edge Animate：
HTML5 ベースのアニメーションや
インタラクティブコンテンツの作成を行える
Adobe のソフトウェア

[Adobe Edge Animate の特徴 ]
○Flash のようなアニメーション・インタラクティブ
コンテンツを HTML5 でコードをあまり書かずに実装する
ことができる（Flash に類似したインターフェース）
○HTML5 ベースのため、iOS にも対応しており、
タブレット / スマートフォンでも閲覧可能
○作り方によりレスポンシブ対応させることも可能

[ レスポンシブ対応するためには ]
(1) レスポンシブ対応をしていない通常の
[Edge Animate] コンテンツを制作
(2) アニメーションさせる要素ごとに
［レスポンシブな拡大 / 縮小］機能を使用するだけ
画面外へはみ出したコンテンツ等は
うまく制御が効かなかったりするので、
無理の無いアニメーションコンテンツ設計が大切

【参考サイト (Edge Animate 初心者向け )】
【参考サイト ( レスポンシブ Web デザイン対応 )】
[Edge Animate 入門 ]
http://www.adobe.com/jp/jos/pinchin/start.html#an
[Edge Animate を試そう！ HTML アニメーションをつくろう第 1 回 ]
http://www.adobe.com/jp/jos/pinchin/howto/responsive-animation-with-edge-animate.html
[ADOBE TV レスポンシブレイアウトの作成 ( 動画 )]
http://tv.adobe.com/jp/watch/learn-edge-animate-cc/19711/

ご清聴ありがとうございました！
honebito.net

HONEBITOサイトの作り方～honebito.net～

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a HONEBITOサイトの作り方～honebito.net～

Similar a HONEBITOサイトの作り方～honebito.net～ (20)