Webデザイン概論講座 | MutsuLog
3月にAIP Cafeにて Webデザイン概論についてお話しさせていただきました。 その時の資料を公開する許可をいただきましたので お言葉に甘えて公開してみました。 内容は、主にBtoBのシステム開発をされている エンジニア、プログラマの方を対象に BtoCなサービスに関わることの多いWebデザイナーが Webサイトのデザインする上で心がけている(であろう)ことを 簡単にまとめたものです。 今回この資料を作成するにあたり 私たちにとっても別の収穫がありました。 自分たちが、Webサイトを作る上で 常に心がけていること気をつけていることを 敢えて文章や図に落とし込むことで 改めて自分たちの考えをまとめることができました。 このような機会を与えてくださった グローバルブレインズ株式会社、株式会社 福岡CSKの関係者のみなさま ありがとうございました。 ワークショップで取り上げたFOICのサイト
IBM Lotus User Interface Developer Documentation - Home
This documentation was created as part of a Lotus® initiative to remove arbitrary differences in our product user interfaces. It describes the CSS and HTML markup structure used in many Lotus® products. Use the information in this documentation to help you customize Lotus® products for deployment in your enterprise or to help you build componentry that seamlessly integrates with Lotus® products. Q
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
【コラム】イマドキのIDE事情 (68) マルチブラウザ対応Webサイト制作ツール「Pirka'r」を試してみる | エンタープライズ | マイコミジャーナル
Pirka'rとは? Pirka'r(ピリカル)は独立行政法人情報処理推進機構(IPA)のオープンソフトウェア利用促進事業の一環として開発されたオープンソースソフトウェアで、オープンソースコミュニティ「The Ashikunep Kotan」にて公開されているEclipseRCPをベースとしたWebサイト制作用のツールだ。とりわけブラウザ間の互換性チェックや、マルチブラウザ対応のプレビュー機能など、これまでWebサイト制作者が頭を悩ませていたWebブラウザごとの挙動の違いによるトラブルを事前に防止することができる。 Pirka'rのWebサイト Pirka'rのインストールと起動 Pirka'rの実行にはJava実行環境が必要となるので事前にインストールしておこう。また、マルチブラウザのプレビュー機能を使用するにはIE(Windowsのみ)、Firefox 3、Safari 4をインストー
携帯サイトで会員登録を阻害する4つのハードル (ユーザビリティ実践メモ)
携帯向けサイトを運営する中で、アクセス数はそれなりにあるのになかなか会員登録に結びつかずに歯がゆい思いをされた経験のある方も多いのではないでしょうか？ 安易に広告投下費用を増やす前に、もう一度原因を考えてみましょう。 不要なメールマガジンが届くのが嫌だ 個人情報を登録することに抵抗がある 情報を入力するのが面倒 あえて登録する必要性が感じられない これらのハードルを乗り越えるためのポイントを整理しました。 1.メールマガジンは配信頻度を明記する これまでに何らかの無料サイトに登録した結果、大量のメールが届くようになったという苦い経験をしているユーザは意外と多いものです。 メールマガジンの受信が必須のサイトの場合でも、あらかじめどの程度の頻度でメールを送付するのかを明示しておくことで、一定程度ハードルを下げる効果が期待できます。 2. 個人情報を登録させる場合には理由を明記する ショッピング
Site-it!: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 これはいい！って思いました。これ考えた長谷川さんすごい。金曜日の第3回情報デザイン・フォーラムで、コンセントの長谷川さんが紹介していたSite-it!。 これはいい！って思いました。これ考えた長谷川さんすごい。 どういうものかというと、プレゼンシートに書いてあったことをそのまま引用しておくと以下の通り。 ウェブサイトの典型的なページをテンプレート化した付箋ノートです。このSite-it!を用いて自由にブレインストーミングを行うことができます。白紙の付箋よりイメージがつかみやすく、PC＋プロジェクターを使うより自由に議論ができ、そしてなにより紙なので安い！Site-it!によって、クライアントも巻き込んで、より柔軟にサイトストラクチャを議論してください。 これ使って、サイトの
サイトのレイアウトがサクサク作れるAIRアプリ「Boks」:phpspot開発日誌
Boks - A Visual Grid Editor サイトのレイアウトがサクサク作れるAIRアプリ「Boks」。 Boksを使えば、グリッド内をドラッグ＆ドロップして直感的にレイアウトを作っていけます 作ったレイアウトは「Export」で簡単にHTML+CSSに出来ます。 HTMLとCSS複数が吐き出されます 基本設定として、グリッドの設定なんかも調整できて、自由度はあります サイトのレイアウトがめんどくさいという方はこういうものでサクっと済ませちゃうというのもありですね。 関連エントリ CSSレイアウトのチート集「CSS Layout Cheats」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 フリーで使えるCSSレイアウトのテンプレート配布サ
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
Webサイト作成の流れを変えるか？·LTSun-Engine MOONGIFT
システマチックでない、いわゆる静的なWebサイトを構築する仕組みが変わり始めている。Concrete5やZimplitに代表されるような、その場で見たままにWebサイトを作り上げていくという流れが強まっているのを感じている。 ユーザ画面をそのまま編集する これまでのCMSでは管理画面を通してユーザ画面を変更していた。だがこれでは距離ができてしまい、本当に提供したかった内容が伝わらないかも知れない。見たままに即座に反映されるなら、自分たちの思いをそのままに投影できるはずだ。 今回紹介するオープンソース・ソフトウェアはLTSun-Engine、ユーザサイトを編集するCMSだ。 LTSun-Engineはユーザが閲覧しているWebサイトのコンテンツをその場で編集し、反映することができる。WYSIWYGエディタを通すので、ポップ内での編集にはなるのだが、編集後にPublishをクリックすれば反映は
いまどきのソーシャルサイトを作るために必要な10の機能（とそのサンプルコード） | IDEA*IDEA
ドットインストール代表のライフハックブログ
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
MOONGIFT: » これはすごい！Firefoxを使ってサイトのモックアップを簡単に作成する「Pencil」:オープンソースを毎日紹介
これはデザイナーのみならず導入必須のソフトウェアと言えそうだ。 Webサイトを作る際には、モックアップが必要になる。それをベースにして「ここをこうしよう」「次はどこに遷移させよう」といった議論が可能になる。頭の中だけではイメージがはっきりせず、意見も出しづらい。 ドラッグアンドドロップでモックアップを作成できる そんなモックアップを作成しようと思ったら、紙やHTMLオーソライズソフトウェア、画像編集ソフトウェアを使うことが多かった。だが画像編集ソフトウェアではチェックボックスやテキストボックスが作りづらい、HTMLオーソライズソフトウェアではデザインの微調整が面倒、紙では重ね書きしづらい…とそれぞれに欠点があった。そこでこれを導入してみよう。 今回紹介するオープンソース・ソフトウェアはPencil、Firefoxアドオンとして動作するモックアップ作成ソフトウェアだ。 個人的にはモックアップ
ホーム - Kusudama
パスタ、小麦粉、豆腐、米、麺類、味噌などの基本的な食材を常備しておけば、健康的でおいしい料理を日替わりで作ることはできますよね。お米は、ほとんどの家庭の主食であり、多くの和食のレシピに使用されます。ここでは、みんなに人気でとても簡単に作れる「焼きおにぎり」を少しご紹介します。焼きおにぎりのオリジナルの作り方は、ただおにぎりを炭火で焼くだけです。炭火がないお家では、おにぎりを鉄プライパンで焼くこともできます。少し珍しい作り方にはなりますが、焼きおにぎりにさまざまな具材を入れてもOK。濃い黄色でカリッとしたおにぎりに味噌や醤油をかけると、より風味が出てとっても美味しくなりますよ。 実は、料理をテーマにしたオンラインカジノのスロットゲームは、驚くほどたくさんあります。食べ物からは誰もが良い刺激を受けるので、スロットマシンだけでなく様々なゲームにも採用されています。ここで一部の例を挙げると、Nin
Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」:phpspot開発日誌
Dynamic Page Flip v2 from shift control Based on the popularity of my original adaption of Macc’s page flipping engine, I’ve gone back and made several major improvements to the dynamic page flip files: Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」。 Webページだけど、本を見るみたいなＵＩにしたいっていう需要はなかなかあるんじゃないか、と思っていたのですが、そんなＵＩを実装するためのFlashサンプルが公開されました。 次の画像のように、マウスでページの右端をドラッグ＆ドロップでページをめくれます。 本の中身は自由に書き換えることができるの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.bufferin.net/special/index.html
【サイト紹介】絵本の世界に住んでみるなら | MutsuLog
http://www.designwalker.com/2009/04/wireframe-2.html
同一色相配色のWebデザイン50 – creamu
http://www.designwalker.com/2009/03/crossbrowser.html
千總 (日本語) - 京友禅着物の老舗 千總
