IT 勉強会カレンダー
2012年2月11日に開催された「World IA Day 2012 Tokyo」で、「ユーザー理解に合わせたユーザーインターフェイスデザイン」というタイトルの講演をいたしました。 World IA Day は、世界的なIAコミュニティである IA Institute が主催する、世界各地で同時開催されるイベントで、その東京会場におけるひとつのセッションを受け持ったかたちです。 今日はここに、その時のスライドと、講演内容を文字おこししたものを掲載いたします(一部加筆や表現の変更をしています)。 スライドデータ(PDF – 3.8MB) ユーザー理解に合わせたユーザーインターフェイスデザイン こんにちは。ソシオメディアの上野です。 ソシオメディアという会社は、ご存じない方もいらっしゃると思いますが、ユーザーエクスペリエンス・デザインのコンサルティングをやっている会社で、主にソフトウェアのユー
このページでは、iPhone、iPod touch、iPadの「Webクリップ」機能で表示されるアイコンの作り方を解説します。 Webクリップとは iPhone、iPod touch、iPadのウェブブラウザ「Safari」の、ブックマーク機能のひとつです。 ホーム画面に、ウェブサイトへのショートカットを置くことができます。 Webページや、ページ内の特定部分に素早くアクセスできます。 Webクリップを作成すると、表示中のページを縮小した画像が、ボタンとして作成されます。 Webクリップ機能に対応したアイコンを設置しているサイトの場合は、そのアイコンがホーム画面に登録されます。 Webクリップの作成方法 Safariで、任意のWebサイトを開く ブックマークに追加などが行える、共有アイコンをタップ「ホーム画面に追加」を選択 このとき、通常は表示しているサイトの縮小画像(サムネール)がアイコ
以下を読んで。 kouseipapa.net/i » 「Clear」をまだ購入してない人はチェックしてみては?HTML5でサンプルが作られてますぞ! おぉ、最近話題のiOSアプリ「Clear」のHTML5版サンプルだそうです。以下がそのサイト。 HTML5 Clear ちなみにこのサンプル、Safariで表示してアクションボタンから「ホーム画面に追加」してWebクリップ化し、Webクリップから起動すると、以下のように全画面表示になります。 おぉ、なんだかアプリっぽい感じ!面白い! 最近のHTML5はすごいですねぇ。以前、調べるだけ調べてまだ何も出来てない以下とか、そろそろ何かやりたいなぁ、とも思う次第。 前から気になってたHTML5について色々調べてみました最近気になってきたjQueryについて色々調べてみました - もとまか日記乙 てことで。 ツイートする
モーダル/モードレスの定義 モーダル/モードレスとは、ソシオメディアの上野学さんによって「再提示」された、「UI デザインの世界における両極のコンセプト」である。まずは2009年から約1年の間に書かれた、大変示唆に富んだブログ Modeless and Modal において、最近では World IA Day 2012 Yokyo の講演において、言及があった。 とにかく「あっ」と分かってしまったことだから、どう説明のしようもないらしい。モーダル/モードレスとは、どんな世界にでもあるイデオロギーの対立、右翼/左翼のようなものである。だから本来的にどちらが正しいと言ったことは、問題にならないはずである。しかし UI デザインの領域においては、昔からモードレスを目指すべきとされている。 モーダル(modal) モードがある状態。つまり、システムが特定の機能の使用に制限された状態。ユーザーが自由
Tweet Pocket ラスベガスに行ったときに、空が雲で一面を覆われていてIt’s cloudyと思っていたら、機内アナウンスでovercastと表現されていてびっくりしました。overcastは、cloudyよりも、もっとどんよりとした雲一面の空を表すときに使うのだそうです。 確かに、曇りはcloudyで良いのですが、overcastも知っていた方が良いと思いませんか? 実際日本の夏だってhot だけじゃ物足りないですよね。「Today is a muggy day!」「ジメジメして暑いよ」とか「Today is a schorching day!」「焼けつくような暑いよ」などと表現できたらカッコイイし、より親切な伝え方になります。 この記事では、天気を表現する英語の32個の形容詞を写真つきでまとめました。 32個もあるなんて驚きですよね。でも怖がることなかれ!イメージでインプットで
画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。 Demo 3: jQuery UI Sliderを使ったタイプ Windyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.windy.js"></script> Step 2: HTML コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。 <ul
2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載!実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その4 目標:実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの:Adobe Photoshop 対象レベル:Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい! これからP
Freebie: Application Icon Set (PNG, PSD, CSH) | Codrops 良い感じのシンプルなベクターアイコン120個セット。 汎用に使えそうなアイコンがぎっしり。シンプルですが、個性があるアイコンセットですね ベクターなのでスマホアプリなんかにも。 関連エントリ 600以上のシンプルなベクターアイコンが入手できる「iconmonstr」 iOSのAppアイコン作成用PSDテンプレート RetinaディスプレイOKなアプリ用PSDアイコン350
TOP > WebService > 温かさを感じられるファーテクスチャまとめ「A Collection Of High Quality Free Fur Textures」 街行く人々の中にも、秋冬の温かい雰囲気のファッションを取り入れている方が増えてきたように感じます。そんな中今回は、温かさを感じられるファーテクスチャをまとめた「A Collection Of High Quality Free Fur Textures」を紹介したいと思います。 Fur Texture 6 by ~Fox-N-Wolf on deviantART アニマル柄のテクスチャをはじめ、さまざまな動物の毛を利用したファーテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Fur textures by ~angelet25 on
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く