[B! webdesign] bongkuraのブックマーク

bongkura id:bongkura

webdesignに関するbongkuraのブックマーク (19)

IDEA * IDEA
ドットインストール代表のライフハックブログ
bongkura 2010/07/30
webdesign

web

idea

ユーザビリティ
リンク
Google Font Directory
The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers. View font details to get the code needed to embed the font on your web site. Please also visit our quick start guide and FAQ page. For more help and suggestions, use our moderator page
bongkura 2010/05/20
google

font

webdesign
リンク
http://www.designwalker.com/2009/09/shopping-design.html
bongkura 2009/09/03
webdesign

ec
リンク
IDEA * IDEA
ドットインストール代表のライフハックブログ
bongkura 2009/08/21
javascript

webdesign
リンク
エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blogはじめに島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース︵以下UI︶設計を担当しています。私からは﹁エンジニアにもわかる﹃ユーザーインターフェース設計﹄﹂と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
bongkura 2009/04/07
まとめ

ui

design

webdesign
リンク
豊富なUIライブラリが魅力のモックアップアプリ - everything might happen tomorrow - yhassy - builder by ZDNet Japan
ウェブサイトやアプリケーションのモックアップに特化したアプリは幾つかありますが、Windows, Mac, Linux すべてで使えるのを探している方は Mockups がお勧めです。このソフトの最大の特徴はモックアップ用に使える UIが数多く存在し、操作も簡単な点です。インストールした時点で75種類の UI要素が用意されており、ドラッグ＆ドロップで付け足すことが出来ます。検索で欲しい UIを探したり、特定の UIをショートカットを割り当てることも出来るので、素早くモックアップを作り上げることが出来ます。 Mockupsは、BMML (Balsamiq Mockups Markup Language) という独自のXMLフォーマットを利用して UI要素を共有することが出来ます。Mockups のコミュニティサイト Mockups To Goでは、開発者やユーザーが作ったU
bongkura 2009/04/02
mac

webdesign
リンク
マンション100％〜物件検索、みんなの口コミ情報
マンション100％は、物件探しのカンタン便利な機能が満載です。評判をみたり、気になるリストに入れて、比較表でらくらく検討。５つのＳＴＥＰでマンション探しをナビゲート。見て楽しく参加して楽しい、みんなでつくるマンション口コミ情報サイトです。補助メニュー利用規約コミュニティ・ガイドラインプライバシーポリシー免責事項運営会社よくある質問お問い合わせ ※"売り切れ"：以前に分譲販売の実績があるマンションを過去物件として掲載しております。キャンセル住戸等存在する場合も"売り切れ"に分類されている可能性がありますのでご注意下さい。株式会社ネクストは、情報セキュリティマネジメントシステムの国際規格「ISO/IEC 27001」および国内規格「JIS Q 27001」の認証を取得しています。 Copyright © Next Co., Ltd. All rights reserved.
bongkura 2009/03/26
webdesign

webservice
リンク
未経験者がユーザーテストを行う際の10のポイント - livedoor ディレクター Blog
こんにちは、ディレクターのほうの谷口です︵余談ですが、ライブドアには3名の谷口がいて、私はプログラマーじゃないほうの谷口です︶。今回は、ユーザーテストについてお話したいと思います。ユーザーテストは、ウェブサイトの新規立ち上げやリニューアルの際、ユーザーがウェブサイトやプロトタイプを実際に操作してもらう様子を目の当たりにすることで、問題点を発見する方法です。ライブドアのサービスは、作る側とユーザー像が近いことが多かったので、頻繁にはユーザーテストをしてきませんでした。しかし、今後は自分たちと違うユーザー像も対象としていきたいことから、ユーザーテストの数を増やしていきたいと思っています。ユーザーテストの専門会社に頼むという手もあり、そうすることで厳密に調査をしてくれます。しかし、ポイントをしぼって外注せずにすむ方法もあるので、ここに紹介します。 1. 被験者は友人か知り合いでいい専門会
bongkura 2007/08/24
webdesign

test

usability
リンク
今度こそフリーの画像編集ソフト『GIMP』をマスターしようという人の為のまとめ*ホームページを作る人のネタ帳
bongkura 2007/08/05
gimp

webdesign

tips

まとめ
リンク
モバイルサイトのデザイン : LINE Corporation ディレクターブログ
こんにちは、﹃livedoor 歌詞﹄や﹃livedoor グリーティング﹄を担当している吉沢です。今回は、モバイルサイトのデザインの決め方、デザイナーとの仕事の進め方をご紹介したいと思います。モバイルサイトのデザインというと、画面が小さいし容量制限も厳しいし、デザインのやりようがないのでは？　と思うかもしれません。確かに1年程前まではそんな状況だったのですが、世間的に 3G 端末が普及し、容量制限の緩和、通信速度の向上とモバイルサイトを華やかに魅せる環境が整いつつあります。そこで﹃ケータイ livedoor﹄も昨年後半あたりから少しずつ 3G 端末をメインとした開発を行っており、今ではモバイルサイトの“こったデザイン”が必須となっています。これまで、サイト開発時にディレクターがデザイナーにお仕事を依頼するタイミングは、サイトのリリース直前という場合がほとんどでした。最後の仕
bongkura 2007/08/05
webdesign

mobile
リンク
小粋なインターフェースを実現する25のコード（パート3） - SIMPLE*SIMPLE ～ウェブ職人のための小粋なネタ帳～
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。小粋なインターフェースを実現する25のコード小粋なインターフェースを実現する25のコード︵パート2︶今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
bongkura 2007/04/18
css

javascript

webdesign

tips
リンク
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。文章の最後に、﹁※︵米印︶﹂などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> ﹁padding-left : 1em;﹂でまず1文字分右に動かして、﹁text-indent : -1em;﹂で最初の行だけ1文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。他には開始位置を揃えるいわゆる﹁ぶら下げ﹂をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
bongkura 2007/03/05
css

webdesign

prototype.js
リンク
ウノウラボ Unoh Labs: ウェブデザインに不可欠なツールサイトの紹介
naoyaです。今日は最近見つけました”ウェブデザインに不可欠なツールサイト”を紹介します。その名前も﹁Web Design Tools - thePeoplesToolbox﹂です。このサイトはウェブデザインの使われるさまざまなサイトをまとめたサイトです。それでは、さっそく使ってみることにしましょう。まず、最初にユーザ登録した方が自分のツールボックスにできるので登録してみましょう。登録するには、右上の"login"リンクから、必要な情報を入力するだけでその場で登録完了となります。"Enter Code"には、"Authentication Code"と同じ文字を入力します。ウェブデザインサイト１ posted by (C) フォト蔵ログイン後、"home"リンクからトップページを表示すると、ウェブデザインに使えるサイトの一覧がカテゴリ別に表示されています。この中から
bongkura 2007/01/30
webdesign

tool
リンク
ウェブデザインに使える16のジェネレーターツール - DesignWalker
bongkura 2007/01/30
webdesign

generator
リンク
Photoshopの無料ブラシを使って、たった３分でプロが作ったようなグラフィックを作る方法 - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
bongkura 2007/01/30
photoshop

webdesign
リンク
ページを切り替える時の特殊効果 - HTMLタグリファレンス/Tips
ページを切り替える時の特殊効果サンプルと機能ページを切り替える時の特殊効果を演出します。トランジション(Transition)効果と呼ばれ、Internet Explorerのみで有効になります。 → Sample 0 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 11 / 12 / 13 / 14 / 15 / 16 / 17 / 18 / 19 / 20 / 21 / 22 / 23 / サンプル・ソース緑の文字が変更箇所で、赤い文字が対応するソースです。 "/* */"内はコメントです。削除しても影響ありません。必要な箇所をコピー＆貼り付けして編集してください。 <HTML> <HEAD>  <META http-equiv="page-enter
bongkura 2006/11/30
design

Internet Explorer

webdesign
リンク
フリーで使えるXHTML＆CSSデザインのテンプレート配布サイト「TemplateWorld」:phpspot開発日誌
TemplateWorld - FREE Website Templates (Valid XHTML And CSS) These templates are licensed under Creative Commons Attribution 2.5 License. This means that you are free to modify the design to suit your tastes in any way you like, but you must include the provided link back to Template World. フリーで使えるXHTML＆CSSデザインのテンプレート配布サイト「TemplateWorld」。フリーとは思えないハイクオリティなテンプレートが配布されています。ライセンスはクリエイティブコモンズで、配布元である
bongkura 2006/11/28
webdesign

template
リンク
ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
こんにちは　satoです。いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。 (1)Color Scheme Generator 2 デザインの大まかな配色等を決めるのに使用することがあります。真似するだけで、Coolなサイトに見えるような気がします。 (2)Color Palette Generator ロゴ等の画像を指定すると、その画像に合ったカラースキームを教えてくれます。 (3)Web 2.0 Colour Palette 有名なサイトのカラースキームの一覧があります。 (4)pmob.co.uk CSSや画面分割などのさまざまなサンプルや解説があります。 (5)logopond さまざまなロゴのサンプルがありま
bongkura 2006/11/28
webdesign

css
リンク
ページをマトリックス風に表示するJavascript | S i M P L E * S i M P L E
これは新しい。なんとあらゆるページをマトリックス風に表示してくれるのだ。（実際の動作はこちら）実装するには以下の1行をコードに加えるだけ。 <script src="http://bodytag.org/bt_melter/bt_melter.js" type="text/javascript"></script> するとbodyタグの中身全部に適用される。なお、javascript自体はbodytag.orgからダウンロードできる。日本語にも対応しているようなので、サイトにアクセントを加えるちょっとした小細工として使えそうですね。
bongkura 2006/11/06
javascript

webdesign
リンク
1