DB（カヤック デザイナーブログ）

CSSアニメーションを使ってアイコンを動かしてみたいと思います。
以下、気をつけた点。

• CSSアニメーションに非対応のブラウザでもアイコンとして成立している
• 過剰なマークアップをしない

現実的に使えそうな路線で頑張ってみました。

はじめまして。
新人MEの渕上伸吾です。

カヤックのMEは、uemura率いる意匠部ME課（メカ）に所属しています。
ME課のお仕事は、コーディングを覚えたい
新人デザイナーのサポートも担っているのですが、
そんななかで出会った、新人にありがちな
勘違いネタについてエントリーを書いてみたいと思います。

これから紹介する勘違いや誤解はME課が全力で解いているのでご安心ください♪

グリッドに沿ってレイアウトするのがWEBに限らずデザインのスタンダードな方法ですが
あえて一部をグリッドから崩してうまくページのアクセントにしているサイトがあります。
今回はそんな読みやすさを保ちつつ、うまく崩しているデザインのサイト、平たくいうと"どこかしら何かがコンテンツからはみでてるサイト"を26個集めてみました！
配置方法や画像の切り方など工夫がさまざまで参考になりますよ！

Web creatorsさんの3月号の特集「作業効率20％アップの Dreamweaver徹底活用法」にちょこっとtipsが掲載されました！意匠部マークアップエンジニア課ことME課（メカ）の yamadaと私で計4つ、チームで開発するときに便利なカスタマイズ という裏テーマで書かせていただきました。

Web creators 2009年 03月号

特に「社内ガイドラインに沿った適切なカスタマイズ」という項目では、複数のコーダーが統一した書式でマークアップするのに便利な設定方法をまとめたつもりですが、最後のあたりだけ私の言葉足らずで分かりにくかったような気がするので、ちょっと補足します。

カスタマイズの内容は、編集メニューの「タグライブラリエディタ」に、デフォルトでは自動補完してくれない属性とその値を登録してみよう、というものです。
たとえば aタグの rel要素を良く使うんだけど～、という場合。タグライブラリエディタ＞ htmlタグ＞ a と開いていき、rel属性とその値を追加すると、

と入力するだけで、補完候補に relが出てくるようになります。
紙面にはカンマ区切りで external, internal と追加している図が出ていますが、あと nofollow なんて指定することもありますよね。

いやー、地味！
でも、こういうささやかなカスタマイズを積んでおくと、タイムアタック的案件でもスピーディーに組めるような気がするのです。

ほかにもオーソドックスなものからトリッキーなものまでいろいろなtipsが掲載された特集ですので、普段漠然とDreamweaverを使っているという方も是非読んでみてください！意外なところで効率化ができるかもしれませんよ。
私は普段コードビュー派なので、デザインビューの tipsなどは特に興味深く読めました。

カヤックでは、Dreamweaverを華麗に使いこなすMEを募集しております！

大変遅ればせながら、先週金曜に参加してきたWeb Directions Eastカンファレンスのフィードバックをお届けしたいと思います。

当日のプログラムについては公式サイト、ことこまかなレポートは安藤日記、gihyo.jpのレポートなどをご参照いただくとして、DBでは私が特に気になった内容についてちょこちょこと触れていきたいと思います。

まずは、Dan Cederholm（ダン・セダーホルム)氏の"Bulletproof A-Z"。
Bulletproof designについてAtoZで（実際はUまでだったけど）キーワードを挙げて俯瞰した講演でした。
Bulletproof designの直訳は「防弾デザイン」、つまり、環境に左右されない表示が出来るしっかりとしたデザイン/コーディングの考え方を指します。WEBフロントエンドの進化を追いながらも、現場で実際にその技術を実現するための「思考力」を啓蒙した今回のカンファレンスでは、とても重要なテーマのひとつだったのではないでしょうか。

"D"の項目でセダーホルム氏は

"Do web sites need to look exactly the same in every browser ?"
（WEBサイトがすべてのブラウザでまったく同じ表示である必要があるのか？）

という一文を提示し、その問題提起への解としてわざわざ文章そのまんまのドメインまで取った（笑）というサイトを紹介していました。

http://dowebsitesneedtolookexactlythesameineverybrowser.com/