Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

641 views

Published on

2014/04/27にリニューアルしたHONEBITOサイト[honebito.net]のメインとなる技術の解説をしています。

以下の3つの項目についての説明をしています。
(1) レスポンシブ Web デザイン (RWD)
(2) シンボルフォント
(3) HTML5 アニメーション [Adobe Edge Animate]

Published in: Art & Photos
  • Be the first to comment

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

  1. 1. ∼ HONEBITO サイトの作り方∼ 2014.05.10 名古屋 Webk 交流会発表用 リ バ ー ス honebito.net
  2. 2. 【サイト概要】 Web クリエイター HONEBITO サイトの リニューアル制作。 他ジャンルのクリエイターとのつながりを 作ることを目的としたポートフォリオサイト。
  3. 3. 【サイト構成図】 TOP Profile Web Animation アプリ Link 問い合わせ フォーム Site / Flash 制作実績 制作実績 制作講義work work work 個別作品ページ
  4. 4. 【今回紹介する技術】 (1) レスポンシブ Web デザイン (RWD) (2) シンボルフォント (3)HTML5 アニメーション [Adobe Edge Animate]
  5. 5. 【(1) レスポンシブウェブデザイン (RWD)】 [ レスポンシブ Web デザイン】 (RWD:Responsive Web Design) [PC、タブレット、スマートフォンなど、 あらゆるデバイスに最適化した Web サイトを 単一の HTML で実現する制作手法 ] のこと。
  6. 6. 【(1) レスポンシブウェブデザイン (RWD)】 RWD の実装方法は、 [ メディアクエリー ]、[Javascript での制御方法 ] 等 今回は [ メディアクエリー ] ベースでサイトを制作。 [ メディアクエリー  記述例 ] @media only screen and (min-width: 800px){ … } @media (min-width: 521px) and (max-width: 799px){ … }
  7. 7. 【(1) レスポンシブウェブデザイン (RWD)】 [ ブレイクポイント ] ( 画面レイアウトを大きく切り替える画面幅 ) → 800px/520px の 2 つ
  8. 8. 【(RWD) メイン画面レイアウト】 #wrapper header mainvisual nav footer #content #contentinner article aside PC
  9. 9. 【(RWD) メイン画面レイアウト】 #wrapper header mainvisual nav footer #content #contentinner article aside Tablet #wrapper header mainvisual nav footer #content #contentinner article aside Smartfon
  10. 10. サイトイメージ【PC 閲覧時(TOP)】
  11. 11. サイトイメージ【Tablet 閲覧時(TOP)】
  12. 12. サイトイメージ【SmartPhone 閲覧時(TOP)】
  13. 13. 【(1) レスポンシブウェブデザイン (RWD)】 RWD で制作してみて、一番感じたこと 【絶対配置との共存が難しい】 ( 基本全要素 % 指定で可変なため ) あまり絶対配置を多用した複雑なレイアウトではなく、 グリッドレイアウトで簡単に要素の幅や配置を変えられる 構成が適している
  14. 14. 【(1) レスポンシブウェブデザイン (RWD)】 【参考サイト】 【参考書籍】 [ ゼロから始めるレスポンシブ Web デザイン入門 ] http://ascii.jp/elem/000/000/697/697463/ [ レスポンシブ Web デザイン入門 マルチデバイス時代の Web デザイン手法 ] の中の [ 固定幅+フルードグリッドレイアウト ] http://p.tl/sM6B
  15. 15. 【(2) シンボルフォント】 [ シンボルフォント】 通常の文字のフォントではなく、図形のフォント honebito.net のシンボルフォント
  16. 16. 【(2) シンボルフォント】 [ シンボルフォントを使うメリット ] ○フォントなので、ベクター形式で拡大しても荒れずに  綺麗に表示可能 ○フォントなので、CSS での色・サイズ・シャドウ等  の装飾が通常フォントと同様に可能 ○フォントなので、画像よりも軽い
  17. 17. 【(2) シンボルフォント】
  18. 18. 【(2) シンボルフォント】 [ シンボルフォントを Web サイトで使用する方法 ] (1)Illustrator でオリジナルのアイコンを作成し、  SVG 形式で保存 (2)[IcoMoon] を利用して作成した SVG 形式のファイル  をアップロード [icoMoon: http://icomoon.io/app/]
  19. 19. 【(2) シンボルフォント】 【参考サイト】 [Retina でもボケない「シンボルアイコン」を使いこなそう! ] http://liginc.co.jp/designer/archives/10334 [ 無料で出来る!オリジナルアイコンフォントを作ってみよう ] http://liginc.co.jp/web/design/font/33237
  20. 20. 【(3)HTML5 アニメーション [Adobe Edge Animate]】 [HTML5 アニメーション】 (Adobe Edge Animate 使用) Adobe Edge Animate: HTML5 ベースのアニメーションや インタラクティブコンテンツの作成を行える Adobe のソフトウェア
  21. 21. 【(3)HTML5 アニメーション [Adobe Edge Animate]】 [Adobe Edge Animate の特徴 ] ○Flash のようなアニメーション・インタラクティブ  コンテンツを HTML5 でコードをあまり書かずに実装する  ことができる(Flash に類似したインターフェース) ○HTML5 ベースのため、iOS にも対応しており、  タブレット / スマートフォンでも閲覧可能 ○作り方によりレスポンシブ対応させることも可能
  22. 22. 【(3)HTML5 アニメーション [Adobe Edge Animate]】
  23. 23. 【(3)HTML5 アニメーション [Adobe Edge Animate]】 [ レスポンシブ対応するためには ] (1) レスポンシブ対応をしていない通常の  [Edge Animate] コンテンツを制作 (2) アニメーションさせる要素ごとに  [レスポンシブな拡大 / 縮小]機能を使用するだけ 画面外へはみ出したコンテンツ等は うまく制御が効かなかったりするので、 無理の無いアニメーションコンテンツ設計が大切
  24. 24. 【(3)HTML5 アニメーション [Adobe Edge Animate]】 【参考サイト (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/
  25. 25. ご清聴ありがとうございました! honebito.net

×