職種を超えたコミュニケーションデザインを考える
2018年9月8日 builderscon tokyo 2018 （#builderscon）に登壇しました。様々なタイプのエンジニアが集まる大イベント。エンジニア寄りの話ばかりの中でデザインの話をしてきました。とはいっても、直球のデザインの話をしても面白くないと思ったので「デザイナーとうまく協働する方法」というコミュニケーションについて今やっているコトと今後の課題について話しました。 職種を超えた言語共有の難しさ ニュアンスだけでなく言葉ですら捉え方は様々です。デザイナーの間でさえ「デザイン」という言葉から思い浮かべる職域や働き方が微妙に異なります。「プロダクトのあるべき姿」であればなおさらです。人によって「良い」の定義が異なれば、優先順位も微妙に変わります。 こうした課題を解決すべく、言語化・視覚化があちこちで行われています。ペルソナを作るのもひとつですし、プロトタイプも方向性を共有す
WD101: Webのデザインは枠のない世界である
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webサイトのデザインは、グラフィックデザインやエディトリアルデザインと同じような感覚でデザインをすると、柔軟性・拡張性が欠けたものになるだけでなく、特定の環境でしか見れないものになることがあります。 こうなるひとつの要因として、グラフィックデザインやエディトリアルデザインが、特定の環境で見るということを前提にしてデザインしているからだと考えられます。A4の紙であったり、名刺サイズだったり、特注のコーティングを施したビルボードなど、決められた枠の中で世界を作り上げるデザインに対し、Webは枠があるようで
3pandaさんとコーディングについて話しました : could
ポッドキャスト 3pandaさんとコーディングについて話しました 大阪でコーディングの仕事をしており、パンダの会という勉強会を運営されている 3panda さんとコーディングの魅力と今後のコーディングの仕事について話を伺いました。 Web関連ポッドキャスト Automagic も無事 10 回目を迎えました。 今回は大阪でコーディングの仕事をされている @3panda さんとコーディングの魅力を中心にお話をしました。彼はパンダの会という勉強会を 2010 年から続けており、そこでの活動内容や今後の展望についても語ってもらいました。 コーダーという仕事をしている方にとってコーディングをするということの魅力は何でしょうか？専門性がより一層必要とされているものの、多角的な視点が必要とされる現在の Web 設計。コーダーという仕事はこれから何処へ向かうのでしょうか、そして何が必要とされているのでし
Google Font API で手軽に始めるフォント遊び
昨日開催された WDE ex -vol9 (Twitter TL) の懇親会で「Google がフォントのホスティングやれば良いじゃないか」という話題が出ていたのですが、朝起きたら Google Font API として現実的なものとなっていました。Web Font をホスティングしているサービスは海外で既に幾つかありますが、ほとんどが JavaScript のコードを貼付ける方法が採用されており、中には body 内に記述しなければならないものもあり、エレガントな方法とはいえませんでした。 今回公開された Google の API は JavaScript を使うのではなく、CSS をリンクするだけ。使いたいフォントをディレクトリから選び、リンクした CSS ファイルに変数としてフォント名を記述するだけになります。シンプルかつ簡単です。 <link rel="stylesheet" ty
様々な意味をもつWebサイトのスピード
「UXの測定要素」で最初にスピードを挙げたのは、Webの体験において近年重要なポジションになってきているからです。ブロードバンドだからこそスピードを要求されますし、モバイルだと欲求はさらに高まるでしょう。プログラムがより早く動作するように記述の工夫や構成の検討したり、CSS や HTML といったマークアップからでもパフォーマンスを上げることが出来ます。こうした技術的なアプローチだけではなく、情報の整理の仕方や心理的な部分からスピードを表現することが可能です。 例えば、トップページのように様々な導線も含まれた情報量の多いページがあるとします。技術的な工夫を施し、表示速度が早いページにしたとしても、情報が入り組んでいて利用者が見つけ難い構成であれば「時間がかかる＝遅い」と感じるでしょう。「２つ以上の製品を比較したい」「製品の特徴を把握したい」という利用者に明確な目的がある場合はどうでしょうか
HTML5に関するW3Cのスライドをリデザイン
先日、Twitter経由で「Web標準化 (W3C) とHTML5の状況 (PDF形式)」というスライドが総務省のWebサイトで公開されているのを知りました。早い時期から国に働きかけているのだなと関心しましたし、どのような内容を紹介しているのだろうと興味があったので早速ダウンロードしてみました。HTML5 の概要をコンパクトにまとめている点は良かったのですが、プレゼンのスライドとしての質はあまり高いものではない内容でした（一番最後のページに「ありがとうございました」と書いてあるのでスライドの可能性大）。 W3Cに携わる教授という視点だと考えられなくはない内容なのですが、国の方（もしくは IT プロフェッショナルではない方）に向ける内容ではない気がしました。せっかくHTML5を多くの方に知ってもらうという素晴らしい機会があってもこれではどうかなと私は思いました。以下が私が気付いた課題点です。
関係作りとしての IA の役割
IA (Information Architecture) において「関係」は重要なキーワードです。ページを構成する情報と情報との関係、サイト内のページとページとの関係。コーポレイトサイトであれば、メインサイトとサテライトサイトというサイトとサイトの関係も考慮します。これに加え、利用者という別の軸の関係も考慮して情報を組み立てて行きます。こうしたことから、IA の専門家達は、建築、情報科学、インダストリアルデザイン、認知学など様々な分野の知識に長けている方が少なくありません。彼等はその広い知識を活用することで様々な情報とコンテキストを繋ぎ合わせている（関係を作り上げている）といえるでしょう。 近年、情報とコンテキストが多様化し初めています。 情報の種類はテキストから動画まで様々ですし、サイズや扱われ方もたくさん出てきました。また、利用者が情報にアクセスする背景を考えてみると、自社の Web
デザイナーが相手にアイデアを伝えるときの心構え
日本国内外問わず、優れたデザインのサイトが増えてきているのを見ると、デザイナーと開発者が分断されているイメージは昔のものと感じることがあります。全体的に見ればそうなのかもしれませんが、悩んでいる方も少なくないも現実。技術的な要素が非常に強いと同時に、感性だけでは成り立たたない Web デザインにおいて、自分とは違う分野の方とのコミュニケーションは永遠の課題といえるでしょう。良いデザインを作り出すためには、どのようなことに気をつければ良いでしょうか。 以前執筆した「建設的な会話をするために気をつけておきたいこと」も似たようなトピックを扱っているので興味がある方はどうぞ。 開発者になる もちろん本職として仕事にしろという意味ではありません。Perl でも PHP でも Ruby でも何でも良いので、簡単なプログラムを作ることで彼等がどのような考えでモノを作り上げているのか分かります。開発者の声
私にとってテクニカルアートディレクターの意味
Twitterでは、自分の趣向に合ったサイトをリンクしているだけということが多いですが、たまに仕事に関係したことを書いていることがあります。先週ですが、以下のようなことを書きました。 優れたマークアップをする方はテクニカルアートディレクターみたいな存在になっていくのかな。既にそんな方いるけど。 — Yasuhisa🗯 (@yhassy) November 12, 2009 Twitterの文字数ではどうも説明しきれない部分があるので、この場で少し補足しておきます。 マークアップする方は印刷機？ 単価数百円のマークアップサービスがあるように、見た目のデザインを再現するという意味でのマークアップの価値は下がっていく一方です。もし見た目を形作るだけでマークアップがあるのであれば、それは当然のことです。紙の印刷業も同様で、見た目の再現の水準が同等であれば、あとは価格しか残りません。Dreamwe
テラハウス訪問で考えた教育のこと仕事のこと : could
仕事教育 テラハウス訪問で考えた教育のこと仕事のこと 先日、東中野にあるテラハウス ICAキャリア開発研究所の見学に行きました。テラハウスは再就職訓練を実施している施設。東京都産業労働局には職業能力開発センターや職業能力開発校といった組織がありますが、テラハウスは民間委託訓練施設に属します。教務部長の金澤さま、キョウリツネットの新井さまと牧原さまにお時間をいただいて、職務訓練の現場について、そして教育する側からみた Web の仕事についてお話を伺いました。 再就職訓練という一度社会に出ている方を対象にして短期間で Web の仕事ができるためのスキルを教える場。3ヶ月の授業と1ヶ月、Webサイト制作会社にてインターンとして働くことが出来るカリキュラムになっています。週に5日の授業はトータルで360時間ありますが、その間に「使う拡張子はなに？」から具体的なワークフローの実践まで幅広く学ぶわけで
3.4.U!で情報とテクノロジーの変化について話しました : could
Webデザインプレゼン 3.4.U!で情報とテクノロジーの変化について話しました 2009年10月8日、JWDA・CSS Nite・PCC の共同イベント 3.4.U! にて「コミュニケーションの変化からみる今後のWebデザイン」とう題名で講演をしました。毎回セミナーに行くと数人知っている方にお会いするのですが、今回はほとんどいなかったので少しだけアウェーな感じがしました。それも恐らくビジュアルデザインやマーケティングなど Web という共通項があるものの、違う立場で仕事をしている方が集まるセミナーだったからかもしれません。こうした場にあまり参加したことがなかったので、新鮮でもあり良い体験をさせていただきました。私の前に話をした un-T factory の中川さん、ニューロテクニカの細野さん共にプレゼンが上手だったという意味でも刺激になりました。 いろいろ技術が出て来ては消えています。人
404ページのデザイン提案【後編】
スケッチをすることでページの大まかな形が見えてきたところで、早速コーディングに入りました。404という1ページの課題なので、そうしているというのもありますが、最近は Photoshop とかでビジュアルを固めないままマークアップを記述することがあります。結局ブラウザで表示される状態でないと分からないこともありますし、骨格の状態から徐々に色や雰囲気を加えて行く作業は結構楽しかったりもします。構造への意識もしやすいですし、この時点でまたレイアウトを吟味出来る機会があるという意味でもメリットがあると思います。こういう作り方をしているので、ブラウザのデバッグツールが充実しているのは非常にありがたいです。 すべての案件でそうしているわけではないですが、今後はそうしていきたいですし、素早く骨格（又はプロトタイプ）が作れるようにならないといけないなと思っています。CSS3がもっと使える状態になれば、さら
404ページのデザイン提案【前編】
Twitterのほうでひっそりと告知しましたが、404ページのデザインを変更してみました。なぜこんなところから始めたのかというと、サイト制作でいつも後回しになってしまう部分なので考えてみたかったですし、1ページ完結型なので早く形に出来るというのが理由です。いわゆるエラーページなわけですが、「見つかりませんでした」という結果表示ではなく何か補助出来ないかというのがテーマでした。 機械的なエラーの表示の仕方はケアが必要です。多くの利用者はエラーをみると、たとえシステムエラーでそうなったとしても、自分のせいにしてしまう場合があります。メッセージの出し方によっては「何か誤操作をしてしまったか」「そもそも何が起こったの？」「もしかして壊した？」といった感情を引き出してしまう可能性があります。利用者が悪くないのに、悪いと突き出してしまうような見せ方だけは避けなくてはいけません。 専門用語を使ったり、簡
トレント・レズナー流マーケティング論
Nine Inch Nails の Trent Reznor といえば、オンラインを活用した様々な活動を数年前から積極的に行っているアーティストのひとり。ウェブサイトもちょっとした SNS になっていますし、以前からネット上で新アルバムの無料配信、GarageBand ファイル形式で楽曲を公開、400GBのコンサートのHD映像を BitTorrent で公開といった様々な活動をしています。 レコードレーベルに対して強い意見を持っている方としても知られていますね。 そんな彼が公式フォーラムに降臨。「my thoughts on what to do as a new / unknown artist」というタイトルで無名アーティストへのアドバイスを幾つか書いています。彼の経験とリスナー/ファンの変化に敏感に反応して活動している彼らしい言葉が幾つかあります。アーティストに向けているとはいえ、他
Progressive Enhancementに関する調査結果
もう１ヶ月前になってしまいましたが、ついに結果を発表出来るようになりました。有効回答数は 134 とサンプルとしては良い数になりました。ひとつの調査結果として捉えるには十分な数ですが、私のサイトと Twitter で告知したということもあり、若干偏っている可能性があるのでご了承ください。前回のTwitter経由でいただいた回答も一緒にご覧になるとおもしろいかと思います。 回答に参加していただいた皆様、本当にありがとうございました。 回答された方の役職はコーダーとデザイナーが半数を占めるものの、様々な役職の方が均等にいるという印象があります。今回は複数回答をアリにしましたし、特にこれといった定義付けもしなかったので、立ち位置を自分なりに考えてもらった結果が反映されています。ブロガーと名乗る方も 9% いらっしゃるので自分のサイトで何か情報発信をしつつウェブサイトの仕事に携わっている方が少なく
あなたを進化させたツールは何ですか？ : could
ソフトウェアテクノロジー あなたを進化させたツールは何ですか？ テクノロジーは常に進化し続けていますが、それと同時に使っている我々も進化し続けています。何か新しいテクノロジーに触れることによって自分の仕事の仕方やライフスタイルを向上させてくれることもあります。また、人のライフスタイルの変化に応じてテクノロジーも進化していることもあります。つまり、お互いが影響し合いながら進化し続けているといっても良いでしょう。 ここ 5年という短いスパンで見たとしても、めまぐるしいテクノロジーの進化がありました。その進化の中、自分も変わってきたと思います。Webサイトやパソコンという小さな枠でみても影響を受けたテクノロジーは幾つかあるのではないでしょうか。今回は自分が影響を受けたテクノロジーを個人的な視点を含めて紹介したいと思います。 MovableType ええ。このウェブサイトは WordPress で
セマンティック・ウェブ検索の現在 : could
microformats検索 セマンティック・ウェブ検索の現在 セマンティック・ウェブはひとつの理想論であって現実にはほど遠いと考えていた時期がありましたが、徐々に形になってきているようです。簡易なかたちであれば、セミナーで話したこともある Microformats がありますし、Social Graph もその一環といえるでしょう。数年前に比べると随分 RDF やメタデータも増えてきているわけですが、それらを効率的に検索したり、オントロジーを利用して情報をつなぎ合わせるツールや、使いやすいインターフェイスをあまり見かけません。どうせなら hConnect のようなものを誰か作ってほしいわけですが、こうした夢の話ではなく、実際に使うことが出来るセマンティック・ウェブ検索を幾つか紹介。 Swoogle University of Maryland が開発した検索エンジン。230万の RDF
オープン Web デザインを始めます : could
openwebdesignwordpress オープン Web デザインを始めます 去年の暮れから今年の始めにかけて Web デザインへの思いを書いてきました。その思いは「Web という媒体を理解した上でのデザイン」「Web デザインへの理解を深める」の２つの記事に集約されているかもしれません。これからも Web デザインへの興味は薄れることもないでしょうし、これからも続きになるような内容を書いていこうと思いますが、ここでひとつ問題があります。 掲載しているサイトのデザインがコンテンツに耐えられなくなって来ているという問題です。 コンテンツを反映しているサイトへ 長い間、このサイトを読んで下さっている方はご存じだと思いますが、以前のデザインは 3年半前に作ったものです。当時はそれで良かったかもしれませんし、そのときにはあまり見かけなかった情報の配置や見せ方をしていたと思います。しかし、今と
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
利用者の期待とUIデザインについて