週刊Webテク通信

2011年7月第5週号　1位は，フッタデザインのトレンド，テクニックとショーケース，気になるネタは，佐賀県武雄市，市のページをFacebookに完全移行へ

Webテク, Webデザイン, Web広告, Illustrator, Photoshop, Facebook

この記事を読むのに必要な時間：およそ 0.5 分

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2011年7月25日～7月31日の間に見つけた記事のベスト5です。

1. Website Footers: Modern Trends, Tips, Best Examples | Moto CMS Templatestemplates.motocms.com/blog/inspiration/website-footers-trends-tips-best-examples/

フッタデザインのトレンド，テクニックとショーケースをまとめた記事です。

以下のカテゴリに分けてフッタデザインを紹介しています。

  • 情報を提供する大きなフッタ
  • 独創的なグラフィックを使ったフッタ
  • サイトマップが入ったフッタ
  • 問い合わせフォーム，ニュースレターの購読フォームなどが入ったフッタ
  • ソーシャルメディアボタンの入ったフッタ

また，クリエイティブでかわいいフッタデザインを紹介した「12 Creative and Cute Website Footer Designs」という記事もありました。

図1　フッタデザインが多数紹介されています

図1　フッタデザインが多数紹介されています

2. Designer's Ultimate Resource Collection | MediaLoothttp://medialoot.com/blog/designers-ultimate-resource-collection/

デザイナーのためのいろいろな素材コレクションです。無料のものと有料のものが半々くらいのラインナップとなっています。

  • アイコンセット
  • ユーザーインターフェイス
  • Photoshopファイル
  • Webテンプレート
  • テクスチャ＆パターン

に分けて掲載されています。このMediaLootというサイトでは，まだまだ多くの素材を提供しています。その中から人気のある素材を集めて紹介した，宣伝用の記事ということですね。

図2　デザイナーのためのすばらしい素材コレクション

図2　デザイナーのためのすばらしい素材コレクション

3. 40+ Web Sites with Ribbon Style in Their Design | Designing Mallhttp://www.designingmall.com/2011/07/web-sites-with-ribbon-style/

リボンの要素を使ったWebデザインのギャラリーです。リボンを使ったデザインは，サイトのテイストによらず使えてアイキャッチ効果が高いところから，アメリカのサイトでは以前から流行っています。

リボンに立体感とテクスチャが加わると，Webデザインのトレンド的要素が詰まっている印象になりますね。

図3　リボンの要素を使ったWebデザインのギャラリー

図3　リボンの要素を使ったWebデザインのギャラリー

4. 20 Impressive Illustrator & Photoshop Icon Tutorials | Tutorials Share | Tutorials, Resources & Tips for Designers!http://tutorials-share.com/2011/07/20-impressive-illustrator-photoshop-icon-tutorials/

IllustratorとPhotoshopによる，アイコン作成のチュートリアルを20個紹介しています。

図4　印象的なアイコンチュートリアルいろいろ

図4　印象的なアイコンチュートリアルいろいろ

5. 35 Inspiring Examples Of Texture In Web Design | SpyreStudioshttp://spyrestudios.com/35-inspiring-examples-of-texture-in-web-design/

テクスチャをうまく使ったWebデザインのギャラリーです。

キャプチャ画像ではよくわからないものも多いですが，微細なテクスチャが効果的に使われているサイトが多いですね。

図5　テクスチャを使ったWebデザインの実例集

図5　テクスチャを使ったWebデザインの実例集

そのほか，先週の記事の中から，インスピレーションの素となりそうなギャラリーページを2つ紹介します。

先週の気になるWebサービス

Screenfly by QuirkTools ? Test Your Website at Different Screen Resolutionshttp://quirktools.com/screenfly/

Screenflyは，様々な画面サイズでサイトの見た目をチェックできるWebサービスです。

任意のURLのページを指定したピクセル数のフレームで開くだけですが，画面サイズによってCSSを切り替えているページのチェックに役立ちそうです。画面は90度回転させることも可能です。

デスクトップ，タブレット，モバイル，テレビの4つのカテゴリで，代表的なスクリーンサイズが登録されているので，そこから選ぶだけでサイズを切り替えられます。

iPhone向けのサイズを選択するとiPhone用ページが表示されるようなので，ユーザーエージェントの切り替えも行われているのでしょう。

図6　様々な画面サイズでサイトの見た目をチェックできるサービス

図6　様々な画面サイズでサイトの見た目をチェックできるサービス

今週の気になるWebネタ

「市長がはまっている」 佐賀県武雄市，市のページをFacebookに完全移行へ - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1107/29/news054.html

佐賀県武雄市が市のページをFacebookに完全移行しています。市長がFacebook好きのようで，Facebookの使い方が分からないという市民への対応の体制も作っているとのことです。

各種手続きの方法や相談窓口の案内などリファレンス的に必要な情報は，元のサーバー内のHTMLをiframeで読み込んでいます。完全移行といいつつも，多くの情報は市のサーバー上にあるというわけでした。

また，iframeを使っていることにより，個別ページのURLが表に出なくなっているのが気になります。「⁠くらしの便利帳」「⁠観光情報」「⁠事業者向け情報」といった大きなくくりでは別URLになっているのですが，「⁠くらしの便利帳」内では「ゴミの収集・分別」も「住民異動・戸籍等に関する届出」もURLが変わりません。「⁠ゴミの収集・分別」のページはここですよとリンク先を知らせることができないのは，ちょっと不便だと思います。

とはいえ，市からの情報に対し「いいね！」やコメントが付いている様子は，活気が感じられていいですね。市民からも好意的な声が多く寄せられているようです。

アメリカではFacebookページがあれば企業ホームページはいらないとも言われていますし，日本でもFacebookに完全移行する企業サイトも増えていくのかもしれません。

Webテク, Webデザイン, Web広告, Illustrator, Photoshop, Facebook

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote