1.0UX TIMEShttps://uxdaystokyo.com/articles菊池 聡https://uxdaystokyo.com/articles/author/satoshi-kikuchi/rich600338<blockquote class="wp-embedded-content" data-secret="MwauzqbsCu"><a href="https://uxdaystokyo.com/articles/should_coders_study_ia/">コーダーはIAを勉強すべきか？</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/should_coders_study_ia/embed/#?secret=MwauzqbsCu" width="600" height="338" title="“コーダーはIAを勉強すべきか？” — UX TIMES" data-secret="MwauzqbsCu" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2016/04/should-coder-learn-ia.png750500仕事の幅を広げる 私がフリーになって初めて受注した仕事は、CMSの乗り換えでした。 既存で使っていたCMSサービスが終了するため、それに伴ったサーバ引っ越し、新しいCMSの選定、ドメイン移管がメインの内容です。 その他に、せっかくなのでデザインを少しブラッシュアップするという内容も含まれました。着手前までは、今までのサイトのデータをCMSに流し込めるように、情報を整形、新しい環境に移動、CSSを少し調整するだけの簡単なお仕事だと思っていました。 しかし、いざやり始めると選定したCMSに合せた情報の設計が必要な事に気がつき、情報が散漫に散らばっている状態だったので、コンテンツが公開できないという事態になってしまいました。みっちりと文章が書き込まれた34ページのHTMLを目の前に、この情報を一体、どうやって、何を基準に情報整理をしたらいいのかと、呆然としてしまいました。 （引用：IAシンキング Web制作者・担当者のためのIA思考術） 迷っている時に図書館でたまたま見かけたIAに関する書籍「IAシンキング Web制作者・担当者のためのIA思考術」で答えを知ることができました。本に書かれていた情報を手がかりにIAに関する他の書籍やブログを読みながら、何度もお客様が書いたHTMLを読み直してようやく、お客様がサイトで何をしたかったのかが、かろうじて掴めるようになりました。 このサイトの目的は「ウェブサイトで顧客を獲得する」ということでした。サイトのご担当者はコツコツと何年も記事を書き続けていましたが、記事の内容は集客の為のものというより、その業界の専門知識に関するものが多く、しかも淡々とした文体で、サイトから集客をしたいという目的からは外れている事に気が付きました。記事の内容から経験が豊富なのも分りましたが、何か欠けているのか、不思議とこのサービスを利用したいと思わせる内容には思えませんでした。判断材料は雑多にあるけど決め手が足りていない…、そんな感じでした。 当然のことですが、サービスを利用してもらうには、ユーザーにメリットを感じてもらはなくてはなりません。そのための情報を出さないといけないと改めて認識した私は「IAシンキング：情報の整理」で書かれていたプロセスの通り、雑多にあった情報をまずは漠然と分類し、分類した情報を構造化させました。 具体的には”サービスを利用すべき人に向けて”情報をまとめ、サービス利用時のシチュエーションに分けて記事の内容を編集（リライト）しました。 情報を「素材」と言ったり「コンテンツ」と言ったりしますが、組織化されていない情報を「素材」段階の情報、ある視点で分類し構造化を行って意味のある情報となったものを「コンテンツ化」された情報と言うこともできます。 （「IAシンキング」：29ページ） のように、この段階まできてやっと情報がコンテンツの形になった気がして、サイトのリニューアルに光明が見え無事に納品することができました。 リニューアルローンチして1年半経ちましたが、エンドユーザーからのフィードバックやサイトを経由してのお問合せが増えたそうです。課題は残りましたが、以前のサイトに比べて、サイトを持つ目的に近づけたと実感しました。 IAができていれば、コーディング時間が短縮される デザインデータを受け取ってマークアップを行うのが私の仕事ですが、過去担当した案件の中には、おそらく情報設計の段階を踏まず、いきなりデザインから着手されたものが多かったように思います。 情報設計されていないであろう案件には、コーディング段階で実装できないものが発覚して手戻りが起きたり、スケジュール上デザインに戻すこともできず、炎上してしまう事もありました。 逆に情報が整理されている案件では、デザインデータと一緒にコーディング仕様書が揃っていることが多かったです。仕様書には顧客からの要望を整理したもの、サイトにのせる情報に対するマークアップ上の要望が書かれています。そのため、マークアップ時にどの要素が相応しいか悩む時間が少なく、とてもコーディングしやすいです。結果として効果のあがるウェブサイトの制作時間が短縮されます。 同様の別案件でも、デザインからマークアップを行う中で、不思議とスムーズにコーディングが進んだことがあります。このような案件はたいてい、ディレクターの指示が明快です。ただの機能説明だけに終わらず、その機能を実装させた理由など、目的を共有してもらう事で結果的に設計されたUIでのデザイン実装を行うことができます。 情報設計（IA）は情報の整理整頓ではない 情報設計（IA）は情報を設計するだけなく、ユーザーをナビゲートしてくれる要素を含んでいます。ユーザーは、メニューやウェブサイトのコンテンツに目的の言葉がなければ離脱します。 目的がわかれば、そのためのUIの提案もすることができます。コーダーは実装だけでなくデザイン、UIができるようになる必要があると感じているので、その延長としてIAを勉強することは重要だと感じています。 IAをもっと学びたい！そんな思いでワークショップに参加します 情報設計をもっと学びたいということから、UX DAYS TOKYO 2016 のアビー・コバートさんのワークショップに参加します。ワークショップ参加にあたり、アビーさんの書籍が日本IA協会にも参加されている長谷川敦士さんの働きかけで、「今日からはじめる情報設計」というタイトルで翻訳されているので読んでいます。 その中で、特に印象に残ったのは「方向を決める」という内容です。 情報が更に隅々まで行き届くようにする為に、サイトで使う言葉を再定義していく作業の大切さが書かれているのですが、コピーライティングの分野だと思っていた部分も情報設計であった事に目から鱗が落ちるような思いがしました。 私たちがユーザーやステークホルダーと言葉の意味を共有せず、同じ言葉で話さなければ、きちんとコミュニケーションすることは難しくなるのです。 （書籍から引用） 冒頭の案件で足りていなかったものはこれだったのかもしれません。何かが足りてないと感じた情報は、”同じ言葉”に気をつけていたら、もっと伝わりやすい情報になっていただろうと感じています。 サイトをローンチさせる事ばかりに集中していましたが、サイトを作る人、サイトを使う人、双方の立場に立った視点を身につけて制作を行えるようになりたいです。自分自身がどの作業工程にいたとしても、情報設計にまつわる考え方は、今後のサイト制作に必須のスキルになってくると個人的に思っています。 情報設計のエッセンスを学んだことで、ただサイトを作るコーダーでなく、効果の上がるウェブサイトが実装できるという嬉しさと驚きを覚えつつ、これまで以上に情報設計への知識を深めて自分の仕事の幅を増やしていきたいです。そして、もっと効果の上がるウェブサイトが構築できるコーダーとして活躍できるようになりたいので、ワークショップへの参加が今からとても楽しみです！ 宮崎優子 フリーランスのコーダー 仕事では主に静的ページのコーディング、CMSへの組み込みなどを主に行っています。他には小規模なビジネスをしている方のWeb展開について相談を受けたりしています。 Webの知識がない人には「デザインをブラウザで再現する為にプログラムを書いたり相談を受ける仕事をしてる」と説明しています。