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

1. Compact and Elegant Side Menus in Website Designs - Designmodohttp://designmodo.com/side-menus-websites/

コンパクトで洗練されたサイドメニューの事例を多数紹介した記事です。

サイドメニューはだいたい以下のような歴史を持つそうです。

• もともとはアプリケーションのインターフェイスとして生まれた
• FacebookやTwitterなどソーシャルメディアのWebサイトで使われて一般的となった
• モバイルアプリで使われるようになった
• 今ではWebサイト全般で用いられている

1ページ完結サイトやパララックススクロールのサイトとの相性がいいところも、普及している理由として挙げられていました。

事例紹介を見ると、最初からメニューが表示されているものと、クリックすると現れるタイプのものとがあります。また、画面全体がメニューとともにスライドするオフキャンバスと呼ばれるタイプのものと、メニューが画面の上にかぶって表示されるものとがありました。

2. Resources for designing high converting landing page | Ishu'sBloghttp://www.ishu.com.np/resources-for-designing-high-converting-landing-pages/

効果的なランディングページのデザインに役立つインフォグラフィックスがまとめてあります。

ランディングページの各構成要素について細かく解説しているものなど、役に立ちそうなインフォグラフィックスが8個紹介されていました。

3. 20 Detailed UI Concept Sketches + Ready Designs For Your Inspirationhttp://www.hongkiat.com/blog/detailed-ui-sketches-designs/

モバイルアプリのUIの手書きスケッチと、実際の完成作とを並べて紹介しています。

立体感も含め、結構細かく表現されている手書きスケッチが多くて驚きました。

4. Responsive Website Designs | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/01/responsive-website-design/

レスポンシブWebデザインのサイトのギャラリーです。あまりこの手のギャラリー記事で見かけなかったサイトが多く、フレッシュな顔ぶれのようです。

最近流行のレスポンシブかつシングルページで、スクロールで見せていくタイプのサイトが多いようです。

5. Resizing YouTube and HTML5 videos proportionally using CSS for responsive web design / HTML & CSS / Markup languages / Programming languages / Articles - BASICusehttp://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design

YouTube動画やHTML5ビデオを、レスポンシブに埋め込むためのCSSを紹介した記事です。

幅を100%に指定して、動画の縦横比から計算した高さ分のpaddingをパーセントで指定するのがポイントです。そのため、4:3と16:9では指定が違うところが注意点です。

そのほか、最近の記事の中から、必見の日本語Webテク記事を3つ紹介します。

• テキスト周りで使えるCSSの小技いろいろ | Webクリエイターボックス
  長いテキストの省略、折り返しする／しないなどが紹介されています
• スマートフォンサイト制作時に覚えておきたいCSS 15 | NxWorld
  画像を使わずCSSでなんとかする方法を中心に紹介されています
• 知っておいて良かった！サイト制作後も助かる保守方法まとめ | コムテブログ
  保守や運用支援を請け負うために役立ちそうなまとめです

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

色色 [:iroiro]http://synthsky.com/iroiro/

「色色」は、入力した言葉を元にカラーパレットを生成できるWebサービスです。その言葉に最も合うカラーパレットが作られるそうです。

仕組みとしては、入力された言葉で画像検索し、見つけた画像を分析して色を抽出しているとのこと。なので、どんな言葉を入れても、カラーパレットが生成されます。

「Export」メニューがあるのでカラーパレットとして書き出せるのかと思ったのですが、Photoshopなどのパレットとしては書き出せませんでした。パワーポイントのカラーパレット形式では書き出せるようです。

作ったカラーパレット（といっても検索しただけですが）のURLは共有でき、HTML埋め込みコードも用意されています。作ったカラーパレットから服のコーディネートをする機能も、遊び心があって面白いですね。