ideasketch/アイデアスケッチ

みつもらー 年末年始の営業のお知らせ

2011年12月28日から2012年1月4日までを冬季休業とさせて頂きます。
年末は12月27日(火)まで、年始は1月5日(木)より通常通り営業致します。

※休業期間中もクレジットカード決済は行なっていただけます。

※休業期間中もお問い合わせの受付はいたしますが、弊社からのご連絡は2012年1月5日(木)以降、順次対応となります。

2011.12.27

UX IT !

最近UX UX ってよく耳にしますね。
会議でも「UXの視点で」、「UXを意識しませんか?」ん?
そもそもUXってなんだ!?

UX = ユーザーエクスペリエンス by ニールセンノーマングループ
「製品やサービスを利用する過程(の品質)を重視し、ユーザーが真にやりたいことを「楽しく」「面白く」「心地よく」行える点を、機能や結果、あるいは使いやすさとは別の“提供価値”として考えるコンセプト。
つまらぬいらいらや面倒なしに、顧客のニーズを正確に満たすことであり、次に所有する喜び、使用する喜びとなる製品を生産するといった簡単、簡潔なことである。」
http://www.atmarkit.co.jp/fdotnet/chushin/uxresearch_01/uxresearch_01_01.html
なるほど。確かに開発サイドって近視眼的になりがちになってしまいますよね。
デザインといえど、初心に帰って、ユーザーの立場で設計をしないとということですね。
ということでアイデアスケッチでも弊社で開発しているソフト“みつもらー”をUX視点で考えてみました。

こんな感じでポストイットを使って、
•水色:山口(A)
•ピンク:阿久津
•黄色:加納
•オレンジ:山口(M)
とブレストをしました。

どんな人がつかうの?
どんなシチュエーション?
どんな気持ちで?
などなどいろいろと課題がみえてきました。
特に皆が開発思考が強いせいか、
感情的(エモーション)な部分に関するポストイットが極端にすくないですね。。
なるほどなるほど。
これを仮説にアンケートをとって検証しつつ、
次回は実際のユーザーの方やまだみつもらーを知らないユーザーの方を迎えてやってみたい、
なんて思っています。

2011.12.15

マルチデバイスサイトのお話その2(MODxとWordPressを使ったシステム開発)

今回は、アイデアスケッチのウェブサイトの裏側、CMS(コンテンツマネジメントシステム、webサイトの更新管理などを行うもの)のシステムを開発した本宮曜さんにインタビュー形式でお話を伺いました。(聞き手:山口)

CMSを選択する

Q.

まず、CMSについて、様々な選択があると思います。
企業によっては、自社のCMSを開発〜導入したり、既成のソフトを利用したりそのあたりの判断基準をお教えください。

#

A.

基本的にどんなサイトにするかによってですが
オープンソースではないCMSを開発する場合は大規模サイトを構築する場合が多く、
中小規模では、CMSはオープンソースのものを利用することが多いです。
金融系や基幹システムはほぼ完全に非オープンソースといってもいいと思います。
一般的なサイトの場合はWORDPRESS(以下WP)などのCMSを導入する事例が多いですね。
WP、Mobable Type(以下MT)といったblog用のCMSを利用した通常サイトの構築は一時流行しました。
今でもその流れは強く残っているようです。
WP、MTなどのblog用CMSで、通常サイトを構築することは可能であり、単純な更新であればとても強いツールになります。

Q.

今回アイデアスケッチのサイトの構築において、WPとMODXを使用していますよね?こちらを使用した理由を教えてください。

A.

まず、企画をお伺いした時に、毎日更新するニュースサイトではなく、各ページが独立した機能を持つサイトだと判断しました。
となると、ページごとにデータの精査方法が違うので、単純に同一ページの追加のようなblog用CMSは不便であると判断し、サイト自体の通常更新はMODXというCMSをベースに開発し、ニュース部分の時系列で情報を更新する部分はWPを使うよう、目的に合わせて2つのCMSを導入することを提案させていただきました。

Q.

WPはブログのような決まったテンプレートを繰り返し更新する用途、MODXはユニークなサイト構成に適しているということですね。

A.

その通りだと思います。MODXの特長として、各ページごとに持ち得るデータを変更(テンプレート変数といわれる機能)することができます。いいようによってはどんなことでもできるCMSと言ってよいでしょう。プラグインの追加も用意ですし、もともと用意されているプラグインもとても強力です。CMS内に格納しているデータをどのように持ってくるかなど、SQLを書くような感覚で簡単に持ってくることができるのです。しかもそれらは難しくなく、パラメーターをセットするだけで持ってくることができ、開発コストを下げることができます。
欠点としては、ページ単位でデータを管理するので、特にデータを処理することなく同じ形式で情報を追加していくサイトなどには向いていないと私は考えています。

マルチデバイスを管理するシステム構築

#

Q.

最近スマートフォンやタブレットPCなど、様々なデバイスで同時にサイトを展開するケースが増えていると思います。今回のようにMediaQueriesの仕組みを利用したインターフェイスのデザイン制作と、MODX , WP の開発と平行するストレスはありますか?

A.

全くありませんでした。
何も気にすることなく、htmlを各テンプレートにはめ込んだだけでマルチデバイスサイトが構築されます。ま、当然と言えば当然なんですけれども(笑)。

Q.

そうですね、デザインとシステムを完全に分離しながらも同時に進行できるのは大きなメリットですね。デザインサイドでもCSSの変更のみで各デバイスの最適化が進められるので実装をしながら調整ができ、とてもやりやすかったと感じています。
ワードプレスのプラグインでも、スマートフォンへ簡単に展開できるものがありますがこちらのメリットはありますか?

A.

メリットはあるでしょう。しかし、これはスマートフォンに最適化されたテンプレートが用意されていて、デバイスによって振り分ける形になります。従って既存のWP用テンプレートを変更する場合はそちらの開発もしなくてはなりませ。それがいささか特殊なデザインになればコストも高くなるでしょう。ですので、一長一短です。単純にWPの情報をスマートフォンに最適化させ見やすくすることだけを目的にした場合はMediaQueriesを使わない方がいいと思います。

#

http://www.moongift.jp/2010/05/mobilepress/

とはいっても、MediaQueriesの場合も別途テンプレート(CSS)は用意するので、こちらもコストがそれなりにかかります。しかし、PCベースで見た時の雰囲気やサイトブランドイメージは損なわれにくく開発しやすいです。
どちらにしろ、DBが一緒であれば表示設定を振り分けるだけなので、スマートフォン対応をするのもデザイン制作のコストをのぞけば、容易に制作できることですね。

CMSと編集性

Q.

今回MODXを使用してみて、非常に使い易い印象を受けました。WPと違いメインメーニュー(左側)が記事•カテゴリーの一覧になっていて、これがMODXのブログではなく、サイト構築のための設計思想を語っているように見えます。

#

また、ページをカテゴリーに関連づけたり、クリエーターごとのページを編集していく過程もとても簡単で、原稿の整理•校正も非常にスムーズに進めることができました。

A.

そうですね、ファイルをフォルダに入れる感覚でサイトを構築できますし、フォルダやファイルごとといった感覚で変数を持たせることができるので、どう表示させるかという設定を簡単に持たせられます。後はその設定を参照し、表示していく感じです。これは、どこに何があるか把握している管理者にとっては一覧で情報が並んでいるより直感的に操作できると思います。

Q.

今回オーダーした部分で、クリエーターの個別ページを動的に生成する機能をお願いしました。サイトに公開されたページを集め、クリエーター一人一人のポートフォリオを構築する機能ですが、MODXを使用してこうした特殊な機能を構築することは、やはり難しいオーダーなのでしょうか?

A.

とくに難しいと追うことはありません。どのように表示したいかが明確であればすぐに構築できます。

#

例えばソート順を特殊にしたい(目立たせるものを古くても上に出すなど)場合でも、ソート基準となる変数を設置し、その変数を設定することで簡単に複数の項目でソートできます。また、記事にcategory毎の一覧表示の場合は非表示にし、author毎のページには表示するなどのフラグも簡単に設置できますので、難しくありません。

パッケージを利用したサイト構築

Q.

今回、インターフェイスではMediaQueries、システム開発では、MODX、WPを、既成のフレームワークを組み合わせることで、マルチデバイス、更新システムに対応したウェブサイトを構築しました。実際につかってみると、更新性やカスタマイズ性が非常に高くとても快適に管理•閲覧ができるウェブサイトが構築できたと感じてきます。
プログラミング•システム構築においてもこうしたパッケージを利用して制作する方法は、今後も普及していく流れは強いと考えますか?

A.

webデザイナーという言葉が出た時代は、更新するだけでページあたり数万円など、htmlをいじれる人間に支払われていましたがそんな時代は早々に終わり、単価はさがりました。その後の、htmlをいじれない人間がサイトを更新していく時代は既にある程度浸透していると思います。
それは今後も加速していくでしょう。しかし、それは効率化、迅速性を重視した場合に強く反映され、特殊なページやデザイン性の強いサイトなどでは、結局CMSを利用しても管理はデザイン会社、システム会社ということも多いです。ですので、管理する人間のスキルや知識、立場なども考慮してCMSの選定や利用を決定し、クライアントにとってどの方法がベストかきちんと提案できる状態にしていれば、パッケージの利用方法も特に難しく考えることなく決定していけるのではないでしょうか。

本宮 曜(ほんぐう ひかる)

インタラクティブメディアアーティスト/web全般に関わる業務を主軸とした制作、その他各種デバイスUIコンサル等を行う。
http://twitter.com/#!/himhong

2011.12.12

マルチデバイスサイトのお話その1(導入編)

最近、どこへいっても話題の多い「スマホ」。
アイデアスケッチスタッフのみんなもスマホが大好きで、暇があればいつも触わっています。
面白いコンテンツを見つけて友達に自慢をしたり、サプライズを覚えるのも最近ではPCよりスマホのほうが多いかもしれません。ちなみに僕はINFOBARとiPhoneを愛用しています。
そんなスマホに対応したウェブ制作をアイデアスケッチでは幾つかやらせていただきました。しかし意外なことに、このあたりのオープンな記事があまりなかったりするので、マルチデバイスサイトを構築する様々な方法について、アイデアスケッチで制作したサイトを事例に書いていこうと思います。

最近の傾向について

スマートフォン所有率は、前回が18.3%、前々回が15.3%、前々々回が12.1%
http://www.yomiuri.co.jp/net/news/mobile/20111114-OYT8T00638.htm
(読売新聞)

1日あたりのメディア総接触時間スマートフォンユーザーは396分と62分も上回る。その中でもスマートフォン利用時間が79分と全体の20%を占め、テレビ、PCインターネットに次ぐ3位
http://j.mp/szHCx9(WirelessWire News)

スマートフォン利用者は、フィーチャーフォン利用者に比べ、携帯電話を 『メディア』 として利用
http://j.mp/swyJhY(デジタル・アドバタイジング・コンソーシアム株式会社)

こういった記事は最近よく見かけます。僕自身も含め、ユーザーがスマートフォンにふれてる時間はとても長くなってきていると思います。「スマホならブラウザでPC向けのサイトも見える」と思っている方も多いと思いますが「ウェブを見るデバイス」としてここまで普及すると、スマホでも快適に見たいという要望は必然的に高まってくると思います。

どんなデバイス対応方法があるの?

アプリなどをつくることを除けば、アイデアスケッチでは2種類の方法をウェブサイトの性質によって使い分け、制作をしています。
ひとつはデバイスを判別してコンテンツ(HTML)を出しわける方法、もうひとつはコンテンツは1つで、レイアウト(CSS)だけをデバイスごとに切り替える方法です。

A.デバイスを判別してコンテンツ(HTML)を出しわける方法

#
ウェブサイトはコンテンツファイル(HTML)とレイアウトファイル(CSS)でページを表示していますが、アイデアスケッチがデザインした日経BizアカデミーWEBサイトでは、PC、スマホ向けに別々にHTML/CSSファイルを分ける方法を使用することで、ユーザーはデバイスごとにコンテンツ表示が変化する状態で画面を見ることができます。
モバイル環境では通信速度が遅いので、余計なデータのやりとりを極力抑えるためにデバイスごとに最適なHTMLにしたり、モバイルでの用途を考え不要なコンテンツを表示しないなど、デザインも含め細かく最適化することで、それぞれのユーザーが快適に閲覧できるように設計をします。

しかし、サイトを3パターン制作するのと同じですので、その分、初期コストがかかりますが、コンテンツのデータベースの共通化など、最新システムを導入することにより、運用のコストを軽減する方法(手法)もあります。

B.ワンソースで、レイアウトを切り替える方法

アイデアスケッチのウェブサイトは、PCでみたときにブラウザウィンドウのサイズを大きくしたり、小さくしたりすると、レイアウトがかわります。

#
#
これはメディアクエリー(MediaQueries)という「ウェブ標準」の技術を利用した方法です。
コンテンツである1つのHTMLファイルと、レイアウトを管理するCSSをスマートフォン、タブレット、PCの各パターンを用意するだけで、マルチデバイス対応ができる優れものなのです。メディアクエリーはピクセルで指定したサイズごとに異なるCSSを自動的に適用することができるので、さまざまなサイズのデバイスに柔軟に対応できます。(以前からウェブページ印刷用のCSSを用意することがありますが、その仕組みが拡張されたものです)
 
iPhoneなどはデフォルトでは980pxの幅と認識してコンテンツを表示しますので「viewport」の指定が必要です。このあたりは後日技術的な話のときにでも。
メディアクエリー仕様(2010年 7月27日付 W3C 勧告候補)
http://standards.mitsue.co.jp/resources/w3c/TR/css3-mediaqueries/
 
対応ブラウザ(リリース年)※実用的になったバージョンを記載
IE9 (2011)/Firefox 3.5+(2009)/Safari 4+(2009)/Chrome(2008)/Opera 9+(2006)

IE6など対応していない古いブラウザーについては、css3-mediaqueries.jsjquery.mediaqueries.jsといったプログラムをつかうことで、同じように対応させることが可能です。
スマホ対応だけを目的とするのであれば、それらの端末のブラウザはメディアクエリに対応しているので、すべてのブラウザに完全対応させる必要性は低いと思います。

#

また、アイデアスケッチのサイトは、フリーで使用できる「modX」というシステムですべてのコンテンツを管理しています。コンテンツを追加すると自動的に全デバイスですんなりみられる仕組みになります。(こちらについてはその2で説明します)これによって、数十枚~数百枚におよぶHTMLファイルをいじることなく、CSSを編集するだけで、すべてのデバイスのレイアウトを管理できます。更新するファイルが少ないのでサイトアップデートのコストも抑えられます。

 

また、全てのデバイスで同じHTMLソースを使うので、サイト制作時に各デバイスを意識した構成とHTMLコーディングなど、デリケートな設計と綿密な計画をもって進めることが必要になります。アイデアスケッチでは制作スタッフやクライアントとワークフローをきちんと認識して進めています。

サイトの特性やターゲット、コストに合わせた柔軟な開発

マルチデバイスに対応するためには、とにかく通信速度にストレスを与えないことが大切です。例えば以下のようなイメージですが、

#
これを画像ファイルでつくるか、CSSでつくるかで10KBほど違いがあります。もしサイトに10,000PVがあれば100MBのトラフィックの違いになってしまうのです。これは大規模サイトでは大きなロスになりますし、モバイルユーザーからしても表示までに時間がかかりストレスの原因になります。携帯キャリア各社もパケット通信の定額制を見直す動きもありますので、制作者側でフォローしていくべき用件だと思います。
マルチデバイスサイトを構築する上でも様々な制作方法がありますが、サイトの特性やターゲット、コストに合わせた柔軟な制作方法を考える必要があるなと思います。
マルチデバイスサイトのお話その2ではアイデアスケッチサイトのシステム開発を担当したプログラマーの本宮さんにお話を伺いたいと思います。
山口
2011.12.01

みつもらー 11月の機能追加

こんにちは、みつもらーサポートです。

冬がもうそこまで近づいて来ましたね。
皆様いかがおすごしでしょうか。

本日のお知らせは、前回に引き続き、11月に実装した新機能のご連絡です。

+新機能の一覧

 1)御請求書を直ぐに作成!

 2)レポート画面に新項目追加!

+新機能の詳細

 1)御請求書を直ぐに作成!

 「見積書は必要なくて、請求書がほしい!」という場合に、みつもり作成画面左下の切替スイッチから
 見積書 or 請求書を選択することで、すぐに請求書を作成できるようになりました。

 これにより、今までよりも素早く、スムーズにご希望の書類まで到達できます。

 見積書 or 請求書の切替スイッチは、左下にあります。
 ※下記、画像をご覧ください。

mitumora_mitumori

 また、既存機能として見積書と請求書の備考欄は、個別に設定が出来ます。
 切替スイッチにてモードを変更しますと、この備考タブも連動して切り替わり
 見積書・請求書のモード毎に、適切な備考を入力する事が出来ます。

mitumora_mitumori_tab

 2)レポート画面に新項目追加!

 「すべてのクライアント」を選択時の「クライアント一覧」(画面下にあります)にて
 クライアント毎の売上が閲覧できるようになりました。

 クライアント名をクリックすると、そのクライアントのプロジェクト一覧へ移動できます。
 ※下記、画像をご覧ください。

mitumora_report_clientlist

 更に、特定のクライアントを選択時に、同じく画面下ある「プロジェクト一覧」から
 クライアント毎にまとめられたプロジェクトの売上を、閲覧できるようになりました。

 プロジェクト名をクリックすると、そのプロジェクトの編集画面へ移動することができます。
 ※下記、画像をご覧ください。

mitumora_report_projectlist

本日は以上となります。

ぜひ新しい機能をお試しいただき、ご意見、ご感想など
みつもらーサポートにお送りください。(サポート連絡先表示へ)
※まだ会員でない方でも こちらから 、みつもらーの一部機能を体験できます。

皆様のみつもり作業がシンプルにスマートになることを願い、今後も様々な機能を実装してまいります。
これからも、みつもらーをよろしくお願いします。

2011.11.16

みつもらー 10月の機能追加

こんにちは、みつもらーサポートです。

さて前回のお知らせより、ずいぶんとお待たせしてしまい、大変申し訳ありません。

本日のお知らせは、10月に実装した新機能のご連絡です。

+新機能の一覧

 1)お見積書に小数点が入力可能に!(FAQへ)

 2)お見積書メールサービス!(FAQへ)

 3)過去の請求書をみつもらーに登録!

+新機能の詳細

 1)お見積書に小数点が入力可能

  お見積書作成時の単価と数量に小数点が入力可能になりました。
  これにより、1円以下の単価をもつお見積り書も作成可能になりました。

  小数点入力のイメージです。

mitumora_decimal_point.png

2)お見積書メールサービス!

  お見積りを作成し、その後パスワードで守られた専用ページにて
  お見積書を閲覧できるようになりました。

  お見積書を作成し「MAIL」ボタンを押します。
  閲覧期間を設定の後表示されるURLとパスワードをメールに添付すれば
  直ぐに御見積書をお客様と共有できます。

  お見積りメールサービスへの「Mail」ボタンは「PRINT」ボタンの下にあります。

mitumora_mail_delivery.png

3)過去の請求書をみつもらーに登録!

  すでに請求書まで発行した過去のお見積りを登録できます。
  最大5つまでいっぺんに登録が可能です。
 
  過去の請求書のデータを入力いただくことで
  レポート機能により、過去の売上情報を管理できます。

  過去の請求データの登録は、マイページの「過去の売上げをまとめて入力」と

mitumora_datainput_1.png

  レポート画面下部の「過去の売上げをまとめて入力」から移動できます。

mitumora_datainput_2.png

本日は以上となります。

ぜひ新しい機能をお試しいただき、ご意見、ご感想などみつもらーサポートにお送りください。(サポート連絡先表示へ)
※また こちらから 、みつもらーの一部機能を体験できます。

皆様のみつもり作業がシンプルにスマートになることを願い、今後も様々な機能を実装してまいります。
これからも、みつもらーをよろしくお願いします。

2011.10.31

Web Designing 2011/10


ideakestchが公式webサイトのデザインを手がけたOPEN YOKOHAMA 2011の記事が、Web Designing10月号に紹介されました。

2011.10.18

みつもらー「見積をもっとクリエイティブに」


みつもらーの解説、PROMOTION VIDEO を制作しました。
音楽もオリジナルで制作、
箱崎健志 / Takeyuki Hakozaki さん http://www.signflax.com/
Naomile さん http://naomile.syncl.jp/
のコラボレーションです。
とても素敵な音楽をありがとうございます!
みつもらーも正式リリースができ、今後とも使いやすく、ストレスのなく見積もりができるように日々開発に励んで参ります!

2011.08.26

MEDIA KIT 配布のご案内

メディアの方々へ
みつもらーに興味をもっていただき大変ありがとうございます。
みつもらーを紹介される際は、ロゴ、画面イメージ、テキストデータなどがご利用できるプレスキットをご利用いただけます。
以下のURLよりDLし、ご利用いただければ幸いです。
http://mitumora.com/media/mediakit.zip
file size / 6.5 M , web用 / JPG , 印刷用 / IllustratorCS1以上

2011.08.08

サービス開始のお知らせ

2011.7.15を持ちまして、みつもらーは正式にサービスを開始いたします。
それに伴い、無料期間は終了となり、年間5000円のサービスとなります。
より使い易く、ストレスなく見積りを制作するために日々「みつもらー」の開発
をいたします。
引き続き「みつもらー」をどうぞよろしくお願いいたします。

2011.07.15

TOP