ビジネスUXを効果的に導入するための4つのステップとは？
UX（User eXperience）すなわち、ユーザー体験は、2000年初頭から知られている概念で、この3〜4年の間で製品の企画や開発など多様な分野で注目されている概念です。 そして製品開発はもちろんのこと、今ではユーザーの生活全般の範囲にまで拡大されて考慮されています。また、B to Cだけではなく、B to Bの領域にまでUXの概念が普及してきています。特に最近では、その期待効果に関心が集まってきています。 数年前までのIT業界では、企業システムにデザインというのは贅沢なものだと思われていて、ただ見た目をきれいに飾る程度の認識がほとんどでした。しかし、いくつかの企業においてUXの成功事例が知られるようになったことで、システムの画面も単にきれいなものではなく、業務の効率性と生産性を高めることだと考え、顧客満足度の向上につなげるための画面や機能の設計を行う企業が増えてきました。 このよう
デザインテンプレートの作り方
Webデザイナーの悩み 本連載ではPhotoshop、DreamWeaverのアプリケーションを使用してWebデザイン、コーディングの解説をさせていただきます。第1回ではPhotoShopを使用したデザインテンプレートの作り方を紹介します。 弊社ではデザインアプリケーションとしてAdobe PhotoShopを使用しています。Photoshopの優れている点はいろいろありますが、画像加工機能だけでなく、デザインに必要な機能をほぼすべて備えた最強のアプリケーションであることではないでしょうか。また、世界的に有名なため、有効なプラグイン等も数多く開発されている点も魅力です。 ところで皆さんにも、「デザインができあがったけど、見出しやボタンなどパーツのテイストが微妙に違っていて、なんかチグハグなデザインになってしまった」「なぜかボタンの制作に思わぬ時間がかかってしまった」「頼んでいたデザインがあ
IE8以前でCSS3の表現を使うには
IEの独自拡張filterプロパティでCSS3を再現 前回紹介したCSS3の機能は、Internet Explorer（以下IE）8以下ではサポートされていません。今回は、クロスブラウザなテクニックとして、IEの独自拡張であるfilterプロパティを使ってCSS3の表現を再現する方法を紹介します。 filterプロパティは、テキストや画像を透過させたり、影を付けたり、色を変えたりと、さまざまなフィルタ効果を指定できるIE独自のCSSプロパティです。これらのフィルタ効果を利用すれば、画像やJavaScriptを利用せずに、CSS3のようなドロップシャドウやグラデーションなどの表現ができます。 filterプロパティには、IE 5.5以上で使用できる効果と、IE 4以上で使用できる効果があり、書式がそれぞれ異なりますので注意しましょう。本稿では混同しないように、より広い機能に対応している、IE
いったん、水を差されたHTML5の現状と、将来について
藤川真一（えふしん） FA装置メーカー、Web制作のベンチャーを経て、2006年にpaperboy&co.へ。ショッピングモールサービスにプロデューサーとして携わるかたわら、2007年からモバイル端末向けのTwitterウェブサービス型クライアント『モバツイ』の開発・運営を個人で開始。2010年、想創社（現・マインドスコープ）を設立。2012年4月30日まで代表取締役社長を務める Facebookが、HTML5をベースにしたアプリから、ネイティブアプリに舵を切った時に、「HTML5に賭けたのは失敗」という話が業界を駆け巡った。 それまでHTML5は、新しいWeb技術の希望の星のように言われており、将来を渇望されていたところに水を差された形になった。 そこで、改めて冷静に「HTMLとは何なのか？」ということを考え直してみた方が良いと思う。 HTMLとWebブラウザの技術的メリットは、 画像な
HTML5の新機能、HTML4との違い
HTMLのこれまでと、進化したHTML5 HTML（Hyper Text Markup Lanuguage）とは、Webページを作成するための言語です。タグと呼ばれる目印を文書に埋め込む（＝マークアップする）事で、画像やハイパーリンクを挿入したり、文書にリストや表などの意味を割り当てる事ができます。 昨今、Webページは、単なる「マークアップされた文書の集まり」というだけではなく、閲覧者が情報を理解しやすいようにデザインされていて、閲覧者からの情報を受け取る仕組みのある「アプリケーション」として利用されるようになってきました。「アプリケーション」としてのWebページの開発には、HTMLの他にも、見た目の表現部分を記述する言語であるCSS、動きを記述する言語であるJavaScriptも使用します。 そのような潮流の中で生まれてきたのが、HTMLの最新の改訂版であるHTML5です。狭義では、W
HTMLとXHTMLは全くの別物
HTMLとXHTMLの違い 往々にしてWebについて勉強する際、知識や仕組みを丸暗記するのは非常に大変です。しかし、Webの歴史を学ぶと、Webの散在する知識がつながりをもち、面白く論理的に覚えることができます。そして、結果的にしっかりと知識を自分のものにできます。 今回は、HTML（Hyper Text Markup Language）とXHTML（eXtensive Hyper Text Markup Language）の歴史をひもときたいと思います。HTMLとXHTML、名前が似ているので、よくHTMLがバージョンアップをしてXHTMLになったと考えてる方がいますが、これは正しくありません。 HTMLは、そもそもSGML（Standard Generalized Markup Language）という言語を元にして生まれたマークアップ言語です。一方でXHTMLは、XMLを元にして生ま
ユーザビリティチェックシートを試そう！
指標化の第1歩 前回（http://www.thinkit.co.jp/article/130/1/）では、「Webサイトの標準的な型」を指標化することが、ユーザビリティ指標化の第1歩であることを紹介しました。 今回は「Webサイトの標準的な型」を抑えるとともに、基本的なユーザビリティの紹介しながら、実際に「指標によるチェック」を体験していただきたいと思います。 まずはじめに、「Webサイトの標準的な型」とはどんなものなのでしょうか。 それは、ページ上から下記のような構成要素で成り立ちます（図1）。 ・ヘッダー ・グローバルナビゲーション ・メインビジュアル ・コンテンツエリア ・ローカルナビゲーション ・フッター それぞれの構成要素の用途も決まっており、ヘッダーは全ページ共通で使われ、Webサイト自体が属している企業やプロダクトを理解させるために使用します。また、「サイトマップ」や「お問
[Think IT] MITでも使われているオープンソースのCMS (1/3)
PHPベースのオープンソースCMS「eZ Publish」 MITでも使われているオープンソースのCMS！ 著者：eZ Systems 豊島 麻里子 公開日：2008/1/7（月） 2008年1月の連載ランキング3位（一覧を見る） オープンソースCMSといえば？ オープンソースのCMS（コンテンツマネジメントシステム）というと何を思い浮かべるでしょうか？ 有名なところでは「Joomla!」や「XOOPS」があるでしょう。確かにこれらさまざまなWebサイトで使用されています。では、米マサチューセッツ工科大学（MIT）や米国海軍で使われているオープンソースのCMSをご存じでしょうか？ それが「eZ Publish」です。eZ Publishは仏ナショナル・ジオグラフィック誌や豪ヴォーグ誌、英・仏・伊エル誌などの出版メディアの公式Webサイトにも利用されています。 本記事では、MITや米国海軍
[ThinkIT] 第1回：こんなにあるオープンソースのプロジェクト管理ツール (1/3)
プロジェクト管理用のソフトウェアといえば、定番のMicrosoft Office Projectをはじめ、これまで様々な商用の製品が存在しました。一方で、従来からオープンソースのプロジェクト管理ソフトウェアにも様々なものがあります。 例えばソフトウェア開発に従事されている方であれば、Edgewall Software社が無償で提供している軽量バグトラッキングシステムの「Trac」を使ったことがあるのではないでしょうか（図1）。 ただし、このような従来のオープンソースのプロジェクト管理ソフトウェアの多くは、目的が限定されているものや基本的な機能のみを実装するものが多く、企業の汎用的なプロジェクト管理に使えるものが少ないのが現状でした。 その背景の1つとして、オープンソースソフトウェアがWebアプリケーション技術に依存しているケースが多く、ガントチャートなど視覚に訴える機能を実現することが技術
Webアクセシビリティを高めるコツとは
アクセシビリティを検証しよう ここでは、制作されたHTMLやCSSが、適切にアクセシブルなものになっているかを客観的に検証できる無料ツールのうち、筆者も使っているおすすめのものを紹介します。 「Web Developer（http://lab.tubonotubo.jp/tools/webdeveloper/index.html）」というFirefoxツールバーは、各種バリデータ、ソースコードチェック、CSSやJavaScriptの無効化シミュレーション、リニアライズ／線形化表示（音声読み上げ順序のシミュレーション）などが可能です。 「Vischeck（http://www.vischeck.com/vischeck/vischeckURL.php）」は、Webページが色覚特異性を持つユーザーにどう見えるのかをシミュレーションできます。先ほど紹介した3種類の色覚特異性それぞれについて、シミ
第4回 HTML5関連のデータベースAPIとWeb Storageの基本 | Think IT
HTML5時代にはWebブラウザでデータベースを扱える 最近のWebの世界で、トレンドになっている技術の1つとして、「HTML5」があります。Webブラウザ上で動作するアプリケーション（Webアプリケーション）が一般化したことがあって、Webブラウザに求められる機能が増えてきました。そこで、その状況に即してHTMLをバージョンアップしようという流れが起こり、HTML5の仕様策定が進められています。 HTML5では、HTMLのタグの仕様だけでなく、周辺のAPI（Application Programming Interface）の仕様も明確化して、Webブラウザによる動作の差異をなくそうという方向になっています。また、Webアプリケーションを作る上で従来不十分だった機能について、各種の新しいAPIも追加されます。 APIの中で、特に不足していた分野の1つとして、「データ管理」が挙げられます。
データベースの最近の変化と動向
データベースのおさらい 今の世の中は、「情報」がすべてと言っても良いぐらいの状況になっています。日進月歩ならぬ“秒進分歩”の勢いで、次々と新しい情報が生まれ、流通し、広がっています。 大量の情報が出回る中で、それらの情報を効率よく管理し、活用することは、非常に重要になっています。このような、「データを収集・管理し、活用するためのシステム」のことを総称して、「データベース」（Database）と呼んでいます。 広い意味では、「大量のデータを集めたもの」をデータベースと捉えることもできます。例えば、図書館は大量の本を集めた場所ですが、図書館もデータベースだと言えなくもないです。また、紙の住所録や電話帳も、データベースの一種だと言えます。 ただ、狭い意味でデータベースと言えば、コンピュータを使って、データを電子的に管理するシステムのことを指します（図1）。今回の連載で取り上げるのも、もちろんこの
[Think IT] 第2回：携帯サイトの制作から公開まで (1/3)
サイト規模に合わせて作り方を選ぶ 前回（http://www.thinkit.co.jp/article/143/1/）は、携帯サイトとPCサイトがどのように違うかを紹介しました。今回は、汎用的な携帯サイト作りを行うための制作の基本から、実機テストまで含めた公開までの手順を解説します。 携帯サイトでは、キャリアによる仕様の違いがあるため、これをどの程度まで考慮するか、はじめに考えなくてはなりません。携帯サイトの作成法には、下記の5つの方法がありますが、ここでは「3キャリア対応の静的サイト+プログラム」について紹介します。 1.キャリア別に静的なサイト 2.3キャリア対応の静的サイト+プログラム 3.プログラムによる動的生成 4.CMSを使ったジェネレータ型 5.MobaSiF（http://sourceforge.jp/projects/moba）などのフレームワーク型 3キャリア対応の静
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
XHTML Mobile Profileに対応したHTML 本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。 まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。 では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します（図1-1）。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ（iモード、EZweb、Yahoo!ケータイ）で表示可能なHTMLの仕様には実に多くの種類が存在します。 現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof
フォームのユーザビリティを改善する
フォームの重要性 今回はWebサイトの「使い方」からユーザビリティを改善する方法を探っていきます。 多くのWebサイトでは、ユーザーにフォームから何らかの情報を送信してもらうことが非常に大きな目的となります。ブログやSNSに代表される、ユーザー自身がコンテンツを作成するような場合では、フォームの操作がWebサイトの基本操作となります。また、ECサイトではフォームを操作して、購入のアクションを完了してもらうことが最大の目的です。 一方で、フォームはユーザーに対する負担が非常に大きい部分でもあります。純粋な操作量も多くなりますし、ユーザー自身が何らかの情報を送信するということに対する意識的なハードルもあります。 ですから、フォームのユーザビリティを高め、ユーザーの離脱を少しでも防ぐことはWebサイトを制作・運営する上で非常に重要な課題となります。 今回はそんなフォームのユーザビリティを改善する
第3回：色調・質感補正の基本 (1/3) [Think IT]
色調補正ツール Adobe Photoshopには、色調を調整するためのツールがたくさん用意されています。「フィルタ」などで劇的な変化が楽しめたり、思いがけない結果を得られるのもPhotoshopの魅力ですが、まずは写真をレタッチする基本として色調を自分の思い通りにコントロールできるようにすることが重要です。 色調を調整していく作業でのポイントは、オリジナルの写真の状態は変更しないで、いつでも確認できるようにしておくことです。そのためには、色調補正はメニューの「イメージ→色調補正」からではなく、レイヤーパレットの下にある白黒の丸マーク「塗りつぶしまたは調整レイヤーを新規作成」から使用してください。そうすることにより、オリジナルは常に「背景レイヤー」として残り、いつでも確認することができます。 「イメージ→色調補正」からの補正は写真のレイヤーを直接補正することになり、やり直す時などに融通が利
効率的に作るコーディングとは？
Dreamweaverを使おう！ 今回と次回にわたって、Adobe DreamweaverとMovableTypeの連携による効率的なコーディングについて解説します。今回は、WebオーサリングツールにDreamweaverを使用して、効率的にページのコーディングをする方法を解説します。 HTMLコーディングをする際、多くのマークアップエンジニア（HTMLコーダー）がテキストエディタやWebオーサリングツールなどのアプリケーションを併用してコーディングを行っているかと思います。Dreamweaverには便利な機能が多く存在しますが、すべてを使いこなしている人は少ないのではないでしょうか。 多くの便利な機能の中でも、今回は次の4つの機能について解説します。 1.コードヒント 2.スニペット 3.ライブラリ 4.テンプレート それでは、早速1つ目の便利な機能であるコードヒント機能について解説しま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3って何？注目機能をピックアップ
自社サイトを見つめ直す