週刊Webテク通信

2011年11月第4週号1位は、Web業界でよく使う用語の英語辞典、気になるネタは、Wikipediaの創設者、ジミー・ウェールズの顔写真バナーが話題

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

1. Web業界でよく使う用語の英語辞典 | Webクリエイターボックスhttp://www.webcreatorbox.com/webinfo/web-jargon-english/

Web業界でよく使う用語を英語でどう表現するかをまとめた、辞書的な記事です。Webテク系の英語ブログを読むときや、英語のWebサービスを使うときに役立ちそうです。

サイト制作時のファイル名やディレクトリ名、class、IDの名前などを英語で付けるときの参考にもなりますね。

  • メールマガジンという言葉はなくNewsletter
  • ファーストビュー(First View)ではなくAbove the fold
  • E-CommerceをECとは略さない

など、豆知識としてもためになり、一気に読んでしまいました。

カナダ・バンクーバー在住の方による記事ですが、カナダではイギリス英語と同様colorではなくcolourなんだなということが、ちょっと気になりました(個人的にcolorよりcolourが好きなので⁠⁠。

図1 Web業界でよく使う用語の英語辞典
図1 Web業界でよく使う用語の英語辞典

2. Mobile Web Mastery: 25 Tips on Designing for Mobile Deviceshttp://wegraphics.net/blog/tutorials/mobile-web-mastery-25-tips-on-designing-for-mobile-devices/

モバイルデバイス向けWebデザインに役立つ25のヒントをまとめた記事です。Tipsやツール、素材などを紹介しています。

レスポンシブWebデザインではなく、モバイル用に別サイトを作ることを想定した記事でした。

図2 モバイル向けWebデザインのための25のヒント
図2 モバイル向けWebデザインのための25のヒント

3. 7 CSS Grid Framework Generatorshttp://www.paulund.co.uk/css-grid-framework-generators

グリッドベースのWebデザイン制作に役立つ、グリッドジェネレーターとフレームワークを紹介しています。

ジェネレーターは、カラム数や幅の数値などを指定してグリッドを作成し、CSSを生成するものです。グリッドデザインの下敷きとなる画像ファイルを生成するものもありました。

図3 グリッドジェネレーターいろいろ
図3 グリッドジェネレーターいろいろ

4. 120 Best Mobile Web Designshttp://bestdesignwebgallery.com/blog/mobile-sites/

モバイル向けWebデザインのギャラリーです。120ものモバイル向けサイトが紹介されています。

キャプチャーされているのはトップページだけなので、それ以外のページがどうなっているのかも気になりますね。

図4 優れたモバイル向けWebデザイン
図4 優れたモバイル向けWebデザイン

5. Simple Styles for Horizontal Rules | CSS-Trickshttp://css-tricks.com/15135-simple-styles-for-horizontal-rules/

区切り線をCSSでデザインするアイデアを8つ紹介しています。

画像をクリックしたリンク先のページで、各区切り線のCSSコードを表示させることができます。

図5 区切り線のCSSデザイン例
図5 区切り線のCSSデザイン例

そのほか、先週の記事の中から、Facebook関連の記事を紹介します。

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

shutto | カンタンスマホ変換サービスhttp://shutto.com/

shuttoは既存のWebページをベースに、スマートフォン向けページを簡単に作成できるサービスです。

ブラウザ上の編集画面で、PC向けページの必要な要素をドラッグ&ドロップでレイアウトし直します。タブUIを新たに追加したり、文字のサイズや色を変えることも可能です。

生成されるJavaScriptをHTMLファイルに貼り付けるだけで、実際のページに適用させることができます。

サイト全体を自動的に変換してくれるサービスではありません。このサービスの編集画面上で、どう変換させるかを指定する必要があります。

トップページだけでもスマートフォン用に体裁を整えたいというような場合に便利だと思います。スマートフォン向けページのモックアップを簡単に作る手段としても、活用できるかもしれません。

図6 PC用ページからスマートフォン向けページを簡単作成
図6 PC用ページからスマートフォン向けページを簡単作成

おすすめ記事

記事・ニュース一覧