週刊Webテク通信

2014年12月第2週号1位は、完璧なフッタを作るための5つのステップ、気になるネタは、コンテンツをバンドルした専用端末「honto pocket」

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2014年12月1日~7日の間に見つけた記事のベスト5です。

1. 5 Simple Steps to Designing a Perfect Footer - Crazyleaf Design Bloghttp://www.crazyleafdesign.com/blog/5-simple-steps-designing-perfect-footer/

完璧なフッタを作るための5つのステップを紹介しています。

  1. 視覚的に目を引く要素を入れる
  2. ページ全体のデザインと調和させる
  3. お問合せなどの連絡を取るためのリンクを入れる
  4. 情報と重要なコンテンツを紹介する
  5. 信頼性を構築するための要素を入れる

「会社概要」「お問い合わせ」をヘッダではなくフッタに入れるのが今のトレンドとのこと。

5は、著作権情報、免責またはプライバシーポリシーなどを入れるということですね。

図1 完璧なフッタを作るための5つのステップ
図1 完璧なフッタを作るための5つのステップ

2. Tips and Tricks to Design with Pixel Perfection in Adobe Illustrator - Designmodohttp://designmodo.com/pixel-perfect-illustrator/

IllustratorをWebデザインなどに使う場合に、ピクセルベースで作業するための設定などをまとめた記事です。

  1. ピクセルグリッドの概念を理解する
  2. 新規ドキュメント作成時の設定
  3. 環境設定
  4. 「ピクセルにスナップ」機能を理解する
  5. ピクセルプレビューを使う
  6. ピクセルの値を整数値に直す
  7. ピクセルに揃わないオブジェクトを「ピクセルグリッドに整合」させる
図2 Illustratorでピクセルベースで作業するための設定
図2 Illustratorでピクセルベースで作業するための設定

3. What To Consider When Choosing A WordPress Theme - Smashing Magazinehttp://www.smashingmagazine.com/2014/12/04/what-to-consider-when-choosing-a-wordpress-theme/

WordPressのテーマ選びで考慮すべきことをまとめています。

  1. 値段:無料か有料か
  2. スピード:軽量のものか機能豊富な重いものか
  3. デザインとユーザーエクスペリエンス
  4. レスポンシブ
  5. SEO
  6. カスタマイズのしやすさ
  7. セキュリティ
図3 WordPressのテーマ選びで考慮すべきこと
図3 WordPressのテーマ選びで考慮すべきこと

4. UI Tiles: Website Flowchartshttp://pixelbuddha.net/ui-tiles/

ワイヤーフレーム作成時に役立つAI、PSD、Sketch素材がダウンロードできます。

サイトの用途別のレイアウトパターンが用意されているので便利に使えそうです。

図4 ワイヤーフレーム用の素材を提供
図4 ワイヤーフレーム用の素材を提供

5. Best Practices for Creating Fullscreen Website Backgrounds | Trendshttp://webdesignledger.com/trends-2/best-practices-for-fullscreen-backgrounds

フルスクリーンの背景を使ったWebサイトを作るノウハウを紹介した記事です。

コントラストをハッキリさせる、ウィンドウのリサイズに対応するなどの考え方が解説されています。

図5 フルスクリーンの背景を使ったWebサイトを作る方法
図5 フルスクリーンの背景を使ったWebサイトを作る方法

そのほか、最近の記事の中から、気になる記事などを紹介します。

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

Excellent Collection Of Web Color Picking, Palettes & Scheme Generating Tools For Designers | SmashingApps.comhttp://www.smashingapps.com/2014/12/04/amazing-web-color-picking-palettes-scheme-generating-tools-for-designers.html

色を選んだりカラーパレットを作るなど、色を扱うためのWebサービスをまとめた記事を紹介します。

Adobeが提供するKulerのような、おなじみのカラーパレット作成のツールのほか、以下のようなちょっと変わったものも掲載されていました。

  • 写真からカラーパレットを作るツール
  • 色から写真を探すツール
  • Webページのアクセシビリティチェックをするためにグレースケールに変換するツール

iPad用のカラーパレット作成アプリも、なかなかよさそうです。

図6 色を扱うためのWebサービスいろいろ
図6 色を扱うためのWebサービスいろいろ

おすすめ記事

記事・ニュース一覧