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

～HONEBITO サイトの作り方～

2014.05.10　名古屋Webk 交流会発表用

リバース

honebito.net

【サイト概要】

Web クリエイターHONEBITO サイトのリニューアル制作。

他ジャンルのクリエイターとのつながりを作ることを目的としたポートフォリオサイト。

【サイト構成図】

TOP

Profile

Web Animation アプリ

Link 問い合わせフォーム

Site / Flash制作実績制作実績制作講義workwork

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) メイン画面レイアウト】

#wrapperheader

mainvisual

nav

footer

#content#contentinner

article aside

PC

【(RWD) メイン画面レイアウト】

#wrapperheader

mainvisual

nav

footer


article aside

Tablet

#wrapperheader

mainvisual

nav

footer


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～

Art & Photos

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