はてなブックマーク

（前回の続き） 30代サラリーマンから心機一転、Webデザイナーをめざし、スクールに通い始めました。 20代の若者ばかりの中、正直浮いていたものの、スキルの習得や実務経験を積むことに力を注ぐ日々。 そんな中で、今も続く人とのつながりや、人生を左右する出会いもありました。 スクールを高評価で卒業！でも・・・ スクールの卒業制作では、幸いにもクラスでトップの評価をいただき、クリエイターズオーディションに出場する機会をいただきました。クリエイターズオーディションとは、制作会社の人事担当者が集まる中で、自分の作品をプレゼンすることができるイベントです。その中でも、トリを務め、かなりの高評価をいただきました。 こうして、Web業界でもやっていけると自信をつけ、会社を退職し、転職活動を始めました。 しかし、現実はそんなに甘いものではありませんでした。やはり30歳を越えた未経験のデザイナーを採用する制作

昨今「セルフブランディング」という言葉が流行っていますが、私も遅ればせながら昨年、セルフブランディングしてみるべくギャラリーサイトとブログを始めました。 当初はそれほど期待はしていなかったのですが、ここ半年で思っていた以上にメリットをいろいろ感じたので、まとめてみたいと思います。 1．書籍への執筆 私のサイトを見た出版社の方々から連絡があり、半年間に書籍の記事を２本執筆しました。 原稿料自体は多くはないのですが、自分自信や私が勤める会社へのPR効果はありましたし、何より良い経験になりました。 Web Designing 2013年3月号に執筆しました 書籍「レスポンシブWebデザインテクニックブック」に執筆しました 2．優秀な人材の入社 私の勤める会社では、某転職サイトを使ってWebディレクターの募集を定期的に行っているのですが、なかなか良い人材に巡り合えませんでした。そんなとき私のサイト

Webサイト制作をしていると、「コンテンツは大したものが作れないからデザインで何とかして欲しい」と言われることがあります。一方で「コンテンツがしっかりしていればデザインはそれなりのものがあればいい」と言われることもあります。 デザインが重要か、コンテンツが重要か。一見、二元論に見えるこの議論はWebデザイナーの間でしばしば論争にもなります。 もちろんどっちも重要だけど・・・ 結論としては、この手の議論でよく言われるように、「コンテンツが良くてもデザインが悪ければ成果は上がらないし、デザインが良くてもコンテンツが悪ければ成果が上がらない」ということなんですが、このシンプルな折衷案だけでは両者の関係の説明としては不十分です。 私は過去の経験から、デザインとコンテンツの関係を正確に表現すると次のような法則として表せると考えています。 法則1 同じ内容のコンテンツであれば、 デザインが良いサイトの

私が運営しているレスポンシブWebデザインのギャラリーサイト「Responsive Web Design JP」ですが、Andy Clarke氏のセミナーで「中にアダプティブデザインのサイトも混ざっている」と指摘されてしまいました（「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点）。 例えばSONYのサイトのように、「特定のスクリーンサイズ（ブレーク・ポイント）ではWebサイトが正しく表示され、テキストを読んだりボタンを押すことが可能だが、それ以外ではテキストが見切れたりボタンが押すことが難しい」ということだそうです。 まさか著名人のセミナーに自分のサイトが活用されるとは思っていなかったので、実は結構嬉しかったりして会社の同僚に自慢したりもしたのですが、この部分については自分の考えを明らかにしておきたいと思います。 「アダプティ

１か月ほど前に話題を呼んだこちらのブログ記事。 世界のWebデザイナーのお給料はいかほど？ | Webクリエイターボックス うわっ、日本のWebデザイナーの年収、低すぎ…？ | Stocker.jp とりあえず気にしないでいたのですが、同僚の米国帰りのWebデザイナーの一言を聞いて結構ショックだったので、自分の考えをまとめてみました。 米国のWebデザイナーの待遇の実際 彼女は米国の大学を出た後、ニューヨークの制作会社で数年働いた後に帰国。国内の有名制作会社で働いた後に私が勤める会社に入社しました。ニューヨークの会社でも前職でも大手クライアントと仕事をしてきて、若いのに非常にクオリティの高いデザインを生み出す力を持っています。 彼女いわく、やはり冒頭のブログ記事の内容は感覚的には正しいようです。 米国のデザイナーは職業として確立していて、キチンとした報酬が支払われ、労働環境も悪くないそうで

早いもので、レスポンシブWebデザインのギャラリーサイト「Responsive Web Design JP」を公開してから１年が経ち、掲載サイト数も200を超えました。 以前の記事で、「半年後、まだ時代遅れの恥ずかしいサイトとなっていないようでしたら、また状況をご報告したい」と書いたのですが、おかげさまで恥ずかしいサイトにはなっていないようなので、最近の傾向について書いてみたいと思います。 １．デザイン性の高いサイトが増えた レスポンシブWebデザインの本質ではないんですが、ギャラリーサイトとしては、やはりデザイン性の高いサイトを載せたいなぁと思うものです。 制作されるサイトの数や種類が増えたことで、そうしたサイトを載せる機会も増えたように感じます。 studio midori.so le coq sportif THE STABLES Warp Japan AOI Pro. Square

私が勤める会社は、基本的には経験者のみを採用しています。未経験者を育てていきたいところではあるのですが、まだ規模が小さいので、人を育てる余裕も人員も足りないのが実状です。 しかし、未経験者に内定を出したことが一度だけあります。今回は、彼のポートフォリオがどのようなものだったのかご紹介したいと思います。 未経験者のポートフォリオの実態 Web制作会社にデザイナーとして就職するためには、ポートフォリオ（作品集）は必須です。私の勤める会社にも、多くの未経験者からの応募があり、ポートフォリオが送られてきます。経験者しか採用しないという方針ではありますが、そうした方のポートフォリオにももちろん目を通しています。 未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。 スクールの課題で作った架空の会社のサイト スクールの課題で作った趣味のサイト スクールの課題で作ったPhotos

ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。（ブレイクポイントを480px、768px、980pxとした場合の例です） 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット／スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト：980px以上用（PC用）の記述 */ @media screen and (max-width: 979px

30代ではWebデザイナーをめざすには遅すぎないか、という質問をよく聞きます。 その答えは、Webデザイナーを一生（60歳くらいまで）続けられる仕事としてとらえるか、そうでないかによって変わってきます。 一生続ける仕事ではないととらえるのであれば、30歳を過ぎてからはじめるには遅すぎるかもしれません。しかし私は、相応のスキルを身につけ、立ち位置を確立できれば、Webデザイナーは一生続けられる仕事だと思っています。 ここでは、Webデザイナーに「なる」ためのスキルではなく、Webデザイナーを「続ける」ためのスキルについて、私が思うところを書きたいと思います。 （なお、プロデューサーやディレクターに職種転換したり、経営層になるといった方向性は除外して考えています。） Webデザイナーに「なる」ためのスキルと「続ける」ためのスキルの違い Webデザイナーに「なる」ために身に付けておくべきスキルと

昨年は多くのレスポンシブWebデザインのサイトがリリースされましたが、現状でもさまざまな試行錯誤が続けられている状態で、賛否両論もあるのも事実です。そうした議論を見ていると、検討が十分でないものも見受けられます。 そこで、レスポンシブWebデザインのメリット／デメリットについて、可能な限り中立的に整理したいと思います。 レスポンシブWebデザインでしか実現できないメリット メリット1　ユーザーエージェントを判別せずに見た目を調整できる ユーザーエージェントを利用しないことは、レスポンシブWebデザインのメリットとして、よく挙げられます。さまざまな画面サイズのスマートフォンやタブレットが登場し、ユーザーエージェントの判別ではあらゆるデバイスの画面サイズへの対応は困難になっています。 画面サイズのみでレイアウトを切り替えるレスポンシブWebデザインは、そのような問題を解決する手法と言えます。

今年は国内でもレスポンシブWebデザインがブレイクし、秀逸なサイトが数多く生まれました。 今回は私が半年間「Responsive Web Design JP」を運営してきた中でも、特にすごいと思ったサイトを一挙紹介します。 Caaaaat Canvas&3Dなサイト。これを最初に見たときはホント鼻血が出そうでした。ちなみにサイトタイトルも画面幅に応じてaの数が変化するんですね。 IMJ 大手制作会社のサイトです。Ajaxや動的なURLの書き換えなど、技術モリモリのすごいサイトです。デザインもきれいですね。 Baby-G Baby-Gの製品サイトです。カシオは積極的にレスポンシブWebデザインを取り入れていますね。大きなビジュアルを使い、凝ったデザインのサイトになっています。 G-SHOCK こちらはG-SHOCKの製品サイトです。このサイトもレスポンシブとは思えない、かなり凝ったデザインの

スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。 通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。 そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。 仕様 今回実装してみたのはこんな感じのやつです。 このボタンを以下のような仕様で実装します。 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる 実装方法 基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。 PC用のviewportの記述 <meta name="viewpor

なんだか最近良く見かける釣りのようなタイトルですが、気にしないでください。 私が日本のレスポンシブWebデザインのギャラリーサイト「Responsive Web Design JP」を公開して半年以上が経ちました。 当初は「こんなテーマのサイトが成り立つのか」「半年後に流行が去って、恥ずかしいサイトになっていたらどうしよう」などと心配しましたが、ようやく掲載サイトも100を越え、波に乗ってきた感じです。 今回は、そんな中で見えてきたことを書きたいと思います。 １．制作されるサイトが増え続けている 9月までは1か月に掲載するサイト数が10前後だったのですが、10月以降は14サイト/月、12月に入ってからは2週間で12サイトと、サイトを掲載するペースが明らかにアップしています。 Responsive Web Design JP開設からしばらくの間は1週間探し続けてやっと1サイト掲載ということも

レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います …

Pjaxを用いたページをめくるような画面遷移や、カードが回転するようなモーダルウィンドウ、Canvasを用いた強みページなど、マイクロインタラクションを用いた実験的なUIを実装しました。 担当業務 企画 / 情報設計 / デザイン / コーディング / JavaScriptプログラミング 掲載 I/O 3000 / Web Design Clip / MUUUUU.ORG / 81-web.com / 81-web.com / WEB PRODUCTION JAPAN / gooodmark / ドコドア / Webデザインまとめギャラリー / Web Design Stock / 魅せるプロのWEBデザイン / Grids / Web Designing Portal ほか多くのサイトに掲載いただきました。 創業80年の老舗和菓子店のサイトです。スプリットスクリーンを採用し、商品を大きく