週刊Webテク通信

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

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

ネットで見かけた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用ページからスマートフォン向けページを簡単作成

今週の気になるWebネタ

Wikipediaの創設者,ジミー・ウェールズの顔写真バナーが話題

Wikipediaの創設者,ジミー・ウェールズの顔写真入りの寄付を募るバナーが話題となっています。Wikipediaで何を検索しても,ジミー・ウェールズの顔写真の下に調べた言葉が表示されるので,面白い言葉との組み合わせで画面キャプチャーを撮るのが流行っているようです。アメリカでも日本でも同じような盛り上がりを見せています。

ジミー・ウェールズの写真を「けいおん!」のキャラクターに変えるスクリプトや,猫に変える拡張機能が公開されたりと,なかなか面白い展開になっていますね。

ツッコまれているのを知ってか知らずか,今度はWikipediaのプログラマーの顔写真バナーも登場しました。これもしっかり写真は左寄せで,今度はこの長髪でおヒゲのプログラマー氏の写真もネタとなっています。

なお,⁠ジミー・ウェールズ」でGoogle検索すると,Wikipediaの彼についての記事が先頭に出てくるのがさすがだなと思いました。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入