プロとは……

9/20に神戸で開かれたDevelopers sumit 2013 kansaiに行ってきました。

 

その中で、「開発 / デザインのプロなら知っておくべき  互いの能力を最大に生かす方法」というおもしろいセッションがありました。

ざっくり、自分なりの解釈でまとめてみました。

 

 

プロのデザイナーとは?

きれいなものをデザインできる人」ではなく、「ユーザが抱えている問題を形で解決できる人

 

そのためには、デザインの原則を知っていてデザインができるはもちろんのことですが、その能力以外にも次のような能力が必要というお話でした。

 

・モノづくりのガイドラインの理解

色、形、配置。それらが人間の気持ちに与える影響を知っている

 

・形が持つ必然性を説明できる

制作したそのデザインがなぜその形をしているか、なぜその素材でできているか。目に見えるものはすべて説明できる

 

・UX的に解決すべき問題を整理できる

ユーザが使いやすい操作感などを実現するユーザ・エクスペリエンス的なデザインを提起できる

または、解決すべきUX的な問題に対して、解決策の選択肢を多くを出せる

 

・スケジュール感、コスト感がある

「いつまでにできる」「どのくらいでできる」という現実的な解を持っている

 

・数字が読める

制作した製品のリテンションレートなど、解析した統計データを見て、(デザイン的な視点で)その数字の意味を理解できる
たとえば、このデザインを変えたから不評だったなど……数字を見て理解できる

 

 

開発者とデザイナーの関係

開発者は「システムが動くこと」を重視するのに対して、デザイナーは「人間がどのように感じるか」を重視する傾向がある。
お互いの視点を理解して、お互いに向いている方向を合わせてゴールを目指したら、お互いの能力を最大限に活かせる……というまとめでした。

 

とても勉強になりました。


Web屋さんのお仕事について

Web屋さんのお仕事についてメモ

 

Web系の仕事には5種類がある。

 

 

・Webデザイナー

 

PhotoshopやIllustratorを使いこなして、ロゴやパーツを作成。

ショートカットをどれだけ使いこなして早くいいものを作れるかが重要。

 

・コーダー(フロントエンジニア)

 

ブラウザ互換を熟知し、html、CSSを使いこなすオールラウンダー。

PCだけで9種類のブラウザに対応しなければならない。

Windows:IE, Chrome, FireFox, Opera, Safari
Mac:Chrome, FireFox, Opera, Safari

 

やってはいけないこと:

IEはくせが強いので、開発中の表示チェックをIEで行うのはダメ。

Chrome, FireFoxあたりで開発中は表示チェックを行い、最終段階でIEでも動くことを確認するくらいがちょうどいい。

 

・フラッシャー(Flashデベロッパー)

 

ActionScriptに特化。

最近はhtml5に方向転換??

 

 

・インフラエンジニア

 

サーバ管理者。

サーバは動いていることが当たり前と感じているユーザが多いので、落ちると大変なことになる。

なかなか人に評価されないポジション。

 

 

・Webブログラマ

 

PHPなどのプログラミング言語を使う。

必然的にhtmlやCSSなどの知識も必要になる。

 

プログラミング言語を4.5言語使いこなすことが多い。

PHP, htm, sql, javascript, CSS

 

※CSSは厳密にはプログラミング言語ではないので、0.5扱い???

 

 

上記の5つ以外にもプロジェクトマネージャーやディレクターなど、統括する仕事もある。

 

最終的に求められるのは、クライアントと話ができる人

 

技術力 + コミュニケーション能力 があれば最強。

 

……など、勉強になりました。


スマホ版のWebについて

今日は、PC版に加えて、タブレット版、スマホ版の画面に最適化したWebページの作り方を勉強しました。

 

それぞれごとにページを作ればいいや……って感覚だったのですが、
どうやらそれではSEO対策的に分散してしまうみたいですね。

 

ということで、CSSによる切り替えをやってみました。

1つのhtml、1つのCSSでいろんな画面に対応する方法があるんですね。

 

作るのは割と面倒ですが、理にかなった作り方だと感じました。


CSSのトランジション

アニメーションが行えるトランジションをやってみました。

 

これが意外に使える!!

 

アニメーションがあるWebサイトって、みんなこれを使っていたんですね、きっと。

何秒かけて状態が変化するかや、ディレイも設定できて便利。

 

今更ながらHTML5+CSS3のすごさを実感しています。