ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合に

hya.ioはブラウザベースのDTMオーディオアプリです。多数のプラグインを読み込んでオーディオ合成等を行う事が出来ます。Web MIDI APIを使ってるみたい。うーん、凄いの出てきましたね・・・なんというか凄いとしか言えない。デモがあるので触ってみては。 hya.io動作デモ

PiskelはブラウザでピクセルアートのGIFアニメを作成出来るツールです。Canvasとgif.jsで実装しているみたいですね。レイヤーを重ねて連続表示し、GIFとしてエクスポート出来ます。Githubでソースコードも公開されています。 Piskel

たまたま見つけたのでご紹介。プログラミング学習サイトです。学生さんの就職活動の支援サイトとして作られたそうですよ。現在はPHPとRubyが学べるみたいです。 学生さん向けの学習サイト。コーディングの楽しさを知ってもらうことで、『エンジニアとして活躍したい』と考える方を支援したい、との事です。機能面では特別、学生さん向け、という感じはありませんでしたが、希望者にはインターン先の紹介や就職までのフォローアップもされているそうです。 実際にコードを書きながら学べる、というもの。問題に解答後は、正解/不正解のタグが表示されますので再挑戦する際も分かりやすい印象です。 問題を作ることも出来ます。問題作成ページでは正誤の判定、最初に表示したい文言の設定を行います。 アカウントはTwitterやFacebookのアカウントでも作成可能です。気軽でいいですね。 今はこういった学習サイトも沢山増えましたが、

要素をフリップ（回転）させるためのライブラリのご紹介。CSS3の記事なんかでたまに見かけますね。使用シーンは限られそうですけど動きは面白いです。 要素をひっくり返す、みたいなやつ。デモ見れば分かると思います。（語彙が無い） こんな感じのを実装するライブラリです。jQuery等を必要としない、非依存型のスクリプトなのもありがたいですね。 フリップは1ページ内に複数設置可能です。 なかなか動きが気持ちいいです。デモやドキュメント、ライブラリのダウンロードは以下よりどうぞ。ライセンスはMITです。 Flippant.js

select要素の使い勝手を良くする事が出来るかもしれないスクリプトのご紹介。モノによっては逆に分かりにくくなりそうなので使いどころを気をつける必要がありそうです。 この手のは数多にあるので一つの選択肢として。jQuery依存です。 上記のようにselect要素のUIをあれこれします。複数選択で選択した要素が分かりやすいのはいいですね。 $('select').selectize( //オプションを書く );オプションもかなり充実しています。 ライセンスはApache2.0だそうです。 Selectize.js

ディスカッションの場を作成して投稿内容を埋め込める、というWebサービスのご紹介。Disqusとちょっと似た感じかもしれません。あんまり使った事無いのでよく分かりませんけど・・ フォーラムを作成し、そのままWebサイトに埋め込み可能、というものです。 フォーラムを作成して埋め込める、というサービス。使用した感じ、かなり手軽でした。わずかなステップを踏むだけで作成できます。 このようにフォーラムを作成したら、右にある「Embed on your site」を押せば埋め込み用のコードが発行されます。 手軽に作成出来るのは魅力ですね。ただ、注意点として、埋め込みコードに不要な文字列が入ってしまうようです。 実際は https://moot.it/i/kachibito のはずですが、発行されるコードを見ると https://moot.it/i/kachibito forums というように、空白

レスポンシブWebデザイン対応サイト向けのドロップダウンメニューを実装する為のスクリプト・FlexNavのご紹介です。なかなか使い勝手も良さそうな印象でした。 PCサイトではマウスホバーによるドロップダウン、スマフォではタップで降りるコンパクトなメニューに切り替わります。 ネストされたメニューにも対応していますのでこのまま利用しても大丈夫・・かな。（まだ詳しく見てないです） <ul class="flexnav" data-breakpoint="800"> <li>Menu01</li> <li>Menu02</li> </ul>カスタムデータ属性でブレークポイントを設定します。em単位でもセッティングできるみたい。 $(".foo").flexNav({ 'transitionSpeed' : '0.4s', 'itemHeight': 50 });降りてくるスピードなどはオプションで

Blok Grid SystemはモバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。スマフォ、タブレットを中心に考えたCSSで構築されています。IE8にも対応。 Blok Grid System

Webアプリやスマフォなどのアプリを紹介するために作られたTumblrのテーマ・AppBlogのご紹介です。Tumblrはテーマが豊富ですが、こういったブログ形式のテーマはあまり見かけないので貴重かもですね。 アプリ紹介用のTumblrテーマです。シンプルで見やすく読みやすい印象でした。 サイドカラムは固定されています。メニューはマウスホバーでスライドインする仕組み。 メニューにはソーシャルサイトへのリンク等を追加できます。Disqus、Google Analyticsにも対応しており、サイドカラムの色の変更も容易に出来ます。また、レスポンシブWebデザインにも対応。 上手く作られてます。こういうレイアウトは個人的に見やすくて好みなので参考になりました。 AppBlog

Moqupsは動作も軽く、直感で使えるモックアップ作成ツールです。ドラッグ&ドロップで楽に操作することが出来て、基本的な機能も全て揃っています。ただし、画像をアップロードするにはユーザー登録が必要となります。 Moqups

colllorは色のコードを指定する事で、その色と相性の良い色、トーンなどを抽出してくれるカラーツールです。 colllor

The Responsinatorは、レスポンシブWebデザインの表示テストを行えるツールです。縦長になってしまうのですが、まとめて表示確認出来るのは便利だと思います。 The Responsinator

タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox

グリッドレイアウトなWebサイトを構築できるフレームワークのご紹介。レスポンシブWebデザインにも対応しており、カラム幅やMedia Queriesもコントロールしやすく設計されてるみたいです。 よくあるCSSフレームワークです。もう数え切れないほど出てる気がしますね・・　こちらはBSDライセンスとなっています。

なかなか良さそうだったのでメモ。 Webサイトの使い方などを教えてく れるツアーコンテンツを実装出来る ライブラリです。ツアーはハイラ イトを使って実装します。シンプル でいい感じ。 ツアーコンテンツスクリプト。なかなか良いです。mootools.js依存みたい。 ツアーコンテンツを実装するtour.js。まんまなネーミングですね。shift+?というショートカットキーがトリガーになってるみたい。 こんな感じでアニメーションエフェクトつきでハイライトしてくれます。 コードは・・元サイトのソースをご参照下さい。手抜きですみませんが少しバタバタしてるのでこの辺で。 以下よりどうぞー tour.js

優れたUXのスマフォ向けアプリ のスクショを紹介するデザイン ギャラリーサイト・UX Archive のご紹介。数はまだ多くは無い ですけど、スクショの数が多い ので参考になりそう。 UXが優れているスマフォアプリのスクショを紹介するギャラリーです。優れているかどうかは触って見ないと何とも言えませんけど、参考にはなるかなと。

LocalStorageを使用したモックアップ の作成ツールのご紹介。シンプルで 軽量なので使いやすいです。見やすい し、D&Dで操作出来ます。手軽で使い やすいのは素敵ですね。プレゼン用 なんかにもいいかもしれません。 シンプルなモックアップ作成ツール。githubでもソースが公開されています。Backbone.jsやLocalStorageで作ったそうです。 左のエリアからシェイプやフォームのパーツをドラッグして方眼紙の箇所にドロップする、という普通の流れで作成します。マウスでリサイズやテキストの変更も容易に行えます。 日本語も問題なし。要素を選択すれば下部で変更出来る様になっています。 エクスポートはPNGで発行されます。自分好みにカスタマイズして使うのも良いのでは。 mockup-designer

ワイヤーフレームを手軽に作れる、 というWebサービス。ユーザー登録 も不要です。URLが発行されるので 教えるのも丁度いいかも。ただ、 凄く高機能、というものではない のでイメージを伝える、みたいな 用途になりそうです。 個人的には軽量でユーザー登録不要、直感で作成出来る点、URLが発行される、という点が気に入りました。 こんな感じ。ドラッグで範囲を決めてエレメントを選定するだけ。メモも残せます。 背面、前面設定なども出来ます。 機能はシンプルながら、最低限欲しい物は揃っていて、操作性も良い感じです。URLさえ分かれば誰でも編集できてしまうので、場所の離れた方とのレイアウトの打ち合わせ等、簡易的な用途として使うのもいいかもしれないです。 Wireframe.cc

タッチデバイス独特の操作方法を明示 するジェスチャーアイコンが商用利用 も可能で、セットで配布されていたの でご紹介。他にもあった気はしますが、 汎用的なデザインで利用しやすそうだ ったのでメモ。 タッチデバイス用のジェスチャーアイコンです。万国で通じそうな汎用的なアイコンで個人的には気に入っています。 指で操作している所をアイコンにしたもの。他にも見かけますけど、このアイコンは結構分かりやすい気がします。商用でも利用出来るそうです。 用意されているファイルはPSD、EPSに加えてPNGがいくつか。 加工もしやすいですし、アプリ開発者さんは利用されてみては如何でしょう。 TOUCH GESTURE ICONS