ドットインストール代表のライフハックブログ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース(以下UI)設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
Dynamic Text Replacement Solutions | Dezinerfolio テキストを動的にアンチエイリアスがかった綺麗な画像にする仕組みが色々とあるみたいです。 FlashやPHP、CSS、JavaScriptの要素をトリッキーに混ぜ合わせているところも見所です。 P+C DTR PHP+GDで綺麗なテキストを生成し、JavaScriptでbackground-image設定して表示します。 そもそもがテキストになっているので、HTMLもクリーンです。 見え方は以下のように、綺麗なテキスト 生成されたHTMLはh5要素として、次のようになっています。 <h5 style="background-image: url(image.php?text=You%27re+Look%27n+At+It&tag=h5);">You're Look'n At It</h
色彩は、Webサイトが どのように際立つか ユーザの目にとまるか ユーザーにどのような感情を芽生えさせるか ユーザがどんな動作をするか に大きな影響を与える。 ユーザの属性に合わせて適切な色彩を使うことは、売上を増大させたり、滞在時間を長くしたり、直帰率を下げることにつながる。 また、Webサイトだけでなく、 ファッション インテリア エクステリア(住まいの外観) 広告、商品 などにも使えるので、汎用性のある知識だと思う。 色彩心理 色 プラスの心理的影響 マイナスの心理的影響 赤 情熱的 活動的 晴れやか 暖かい 元気の良い 購買欲求 安っぽい 派手 危険 暴力 青 さわやか 清らか 清涼感 すっきり クール 閑静 憂鬱 寂しい 冷淡 未熟 無機質 黄 若々しい 陽気 明るい 楽しい うるさい 目立つ 幼稚 警戒 緑 ナチュラル 新鮮 穏やか すがすがしい 毒 田舎 疲れ 未熟 紫 高貴
サイトマップを独立したページとしてではなく、フッタに配置する際のポイントとその効果をWeb Designer Wallから紹介します。 Modern Sitemap and Footer 下記は、その意訳です。 昔はほとんどすべてのウェブサイトで、コンテンツをリストアップしたサイトマップを独立したページとして設置していました。 サイトマップの重要な目的は、ユーザーや検索エンジン(スパイダー)がサイト内の情報を探し出すのに役立つことです。 現在は、多くのモダンなウェブサイトでサイトマップページを設置していません。代わりに、サイトマップをフッタに配置しています。 サイトマップをフッタに設置する効果 クリック数やページビューの増加 ユーザーはページを隅々までじっくり見るわけでなく、スクロールしながらざっと見ることがほとんどです。 そして、多くのユーザーがスクロールして最後に見る場所は、フッタです
オンライフモバイルの開発で役立った情報源やライブラリのまとめ 2009-03-23 本日、株式会社ヨセミテにて提供中のみんなの闘病サイト オンライフのモバイル版がオープンしました。 日本初、携帯電話から闘病情報の共有ができる『オンライフ モバイル』を提供開始 (プレスリリース) 僕自身、ログインやフォーム送信などの機能を備えたモバイルサイトの本格的な開発は初めてだったので、多くの情報源やライブラリに助けられました。その中でも特に役立ったものを紹介します。 目次 モダンなモバイル開発のススメ (PHP編) ゆどうふ氏による最近のモバイル開発事情と利用ライブラリのまとめ。ライブラリはPHPですが事情説明は共通ですので、PHPな人もそうでない人もぜひ。 モダンなモバイル開発のススメ :: handsOut.jp PHP×携帯サイト デベロッパーズバイブル PHP×携帯サイト デベロッパーズバイブ
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが1ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう?という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね?」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
ウェブデザインのテンプレートは結構多いけど、こうしたPSD形式での配布は珍しいですね。 今回はフリーPSDテンプレート10というエントリからご紹介。 デザインの勉強に持つかえるかも 配布形式はPhotoshopなんかで開くPSDファイル。 ダウンロードしてじっくり見てみるのも有りかもしれませんね。 Darkwood Free hosting template Old burned paper Blog Source 10全ては以下に。 過去紹介しているhtml/cssテンプレートサイト 1170 + Ajax/Javascript/Dhtml examples and demos to download Dynamic Drive DHTML(dynamic html) & JavaScript code library Ajax/JavaScriptの宝庫。htmlはあまり関係ないけどお
チュートリアルでここまでやる?というプロレベルのWEBレイアウト作成チュートリアル 2009年03月17日- 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques | 2experts Design - Web Design and Graphic Design Blog チュートリアルでここまでやる?というプロレベルのWEBレイアウト作成チュートリアル。 プロレベルといっても様々ですが、そのなかでも優れたといえるレイアウトとデザインのチュートリアルが公開されています。 真似することでそれなりのものを作るのは難しくなさそうです。 Create a Magic Night Themed Web Design from Scratch in Photoshop マジックをイメージした、少し怪しげなレイアウト。占
CSSは最近のWebシステムでは当たり前のように使われている。そして肥大化したCSSはネットワークの帯域を余計に食っているようなものだ。それを解決する手段として、CSSの余計な空白や改行を消して圧縮する技術がある。 こんなにちっちゃくなっちゃった! だがCSS Compressorはもう一歩先の技術を使って、さらに圧縮を実現してくれる。これはなかなか興味深い。 今回紹介するオープンソース・ソフトウェアはCSS Compressor、CSSを解析した上で圧縮してくれるソフトウェアだ。 CSS CompressorはJava製のソフトウェアで、コマンドラインで実行する。CSSファイルを引数として指定すると、標準出力に圧縮した内容を返してくれる。余計な空白や改行の削除はもちろんとして、幾つか面白い機能がある。 ヘルプ 同じ設定を行っているクラスがあれば、それを一つにまとめてくれたり、4辺に同じ設
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ1つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ
Checkbox alignment in IE and Firefox | Xinotes チェックボックスを綺麗に並べるCSSサンプル。 次のように、チェックボックスの横に、改行入りのテキストを入れても綺麗に配置するサンプルです。 簡単そうでなかなか難しいテクニックかもしれないので覚えておくとよいかも。 サンプル IEでもFirefoxでも動作。Chromeでも試してみたところ動作しました。 関連エントリ クリーンなデザインでピュアCSSなフォームを作るサンプル CSSでクールなINPUTフォームを作成するサンプル CSSベースのクールなフォーム、サンプル集 CSSでフォームデザインをする際のチュートリアル
アイコンの効果的な使い方を実例から学ぶチュートリアルをSmashing Magazineから紹介します。 How To Use Icons To Support Content In Web Design 下記は、その意訳です。 How To Use Icons To Support Content In Web Design アイコンは、ユーザーをあなたのウェブサイトの内容に惹きこませるシンプルで、効果的な方法です。 アイコンを使用して、ウェブサイトのコンテンツをサポートする素晴らしいサンプルとベストプラクティスを紹介します。 1. How To Use Icons アイコンを効果的に使用する方法 アイコンを使用する際のゴールの一つは、ユーザーに情報を素早く、そして効率的に伝えることです。 アイコンを効果的に使用すると、説明を必要とせずに、有効なコミュニケーションを可能にし、少ないコンテ
Directory Trees With PHP And jQuery PHPとjQueryを使ったアニメーションするディレクトリツリー実装。 ディレクトリの中身を表示する際に使えそうな一風変わったUIを提供してくれます。 デモページ 一般に公開する場合は、opendir で開くパスのチェックはセキュリティ的にやった方がよさそうです。 CSSやアニメーションの仕方を変えれば、いろいろと独自のUIが作れそうですね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 伸縮する全画面背景を設定できるjQueryプラグイン「Supersized」 便利なjQueryプラグインいろいろ
※ 画像は公式サイトデモより Webサイトを作っていて、複雑なページ構成をCSSだけで組もうとするとすぐに無理がくる。floatやclear、left/rightなどを組み合わせるのだが思い通りにいかない。やっとできたと思ってIEでみたらぶっ飛んでいた、なんてことはざらにある。それだけでもうやる気がなくなってしまうことだろう。 サンプル1 そのような悲惨な目に遭わないためのテクニックがCSSフレームワークの活用だ。あまり重厚なものでなく簡易的なものをと思っているならGolden Gridを使ってみよう。 今回紹介するオープンソース・ソフトウェアはGolden Grid、970pxを横幅にしたCSSフレームワークだ。 最近のWebサイトでは970pxあたりがよく使われる。既に800×600の時代は終わり、1024pxの画面でも十分見られるサイズと言う訳だ。Golden Gridもそれに対応し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く