携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
Mockingbird has Shut Down
Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http
SnapCrab for Windows - マウスひとつで、即キャプチャ。
用途に合わせて選べる 撮影方法 SnapCrabは、デスクトップ上のあらゆる場所を撮影し、PNGやJPEG、そしてGIFファイルとして保存できるキャプチャソフトです。画面全体はもちろん、ウィンドウや指定範囲の画像を自在に撮影できます。 画面全体も 指定領域も自在に撮影 撮影は、ツールバーのアイコンをクリックするだけのシンプル操作。 Sleipnirと連携することでウェブページも撮影できます。 設定ダイアログで、多彩な設定項目を自由に組み合わせられるので、 目的通りのキャプチャが実現します。 半透明ウィンドウを 美しくキャプチャ Aero Glassの半透明ウィンドウも、影付きでキャプチャが可能です。 背景が映り込まないよう設定をすることで、 わざわざ撮影のためにデスクトップを片付けなくても、美しくキャプチャできます。 撮影は、ツールバーのアイコンをクリックするだけのシンプル操作。 Slei
iPhoneアプリのツールバー部分に使えそうなアイコン色々:phpspot開発日誌
知人のアプリ作者の人に、アイコンを探すのに苦労したという話を聞いたので、iPhoneアプリのツールバー部分に使えそうなアイコンを色々まとめてみました。 全部足すと545種もありますので、ツールバーアイコンには困らないかもしれません。 iPhoneアプリケーション作者の方や、今後作ろうと思っている場合に参考にどうぞ。 30 Free Vector Icons | Dezinerfolio 綺麗にまとまったデザインで種類も次のような３０種類がまとまってます Glyphish – Great icons for great iPhone applications 130種類の商用利用可能な汎用アイコンセット。 Free iphone toolbar icons こちらも、商用利用可能な160種類の汎用アイコンセット app-bits : iPhone Toolbar Icon Set : iPh
5 Simple Tricks To Bring Light and Shadow Into Your Designs — Smashing Magazine
There’s just no escaping light and shadow – it’s everywhere you look. Everything you see reflects light and casts some sort of shadow. Visually, light and shadow help us make sense of what we see and help us understand texture, dimension and perspective. So, as we try to make our designs on the Web more natural, moving and intuitive, a good understanding of light and shadow is pretty important. He
html5doctor - HTML5.JP
サイト内検索 html5doctor ( http://html5doctor.com/ )とは、Richard Clark 氏、Bruce Lawson 氏、Jack Osborne 氏、Mike Robinson 氏、Remy Sharp 氏、Tom Leadbetter 氏といった HTML5 に関して著名な方々が共同で運営しているサイトです。<html>5doctor は、HTML5 を使おうとする人に、さまざまなリソースを提供することを目的として運営されているサイトです。このサイトで掲載されている記事は、HTML5 を習得する上で、非常に有益なものばかりです。特に、マークアップに関する記事が充実しています。 HTML5.JP では、html5doctor の許可を頂き、記事アーカイブの日本語訳を掲載しましたので、ぜひ、HTML5 の理解にお役立てください。 一部、直訳ではなく意訳
User Heat : どこが読まれているか見える！無料ヒートマップ・ツール
ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか？ ヒートマップツールを使う
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
プロが語るデザインの極意 売り上げをのばす方法 よいキャッチコピーの書き方 感性とは DTPプロのフォントの使い方 Mac環境とソフトの相互性の選び方の工夫のコラム集です
文章の善し悪しを決めるキャッチコピー まずお客様に読む気を起こさせなくては本文にどれだけ良いことが書いてあっても意味がありません。そこで必要なのが効果的な"キャッチコピー"です。つかみのあるキャッチコピーは、詳しく知りたい、もっと読みたいと思わせ、本文や詳細に導くので、とても重要です。 言いたい事が一目で分かり、見る側の求めている事も的確に表現する。つかみがあり興味を引くキャッチコピーなら私達にお任せ下さい。お客様は先入観がないので「テキストで善し悪しを決める」だけ、自分にとって「必要な情報」「知りたい事」「問題の解決につながる期待」であると認知すれば必ずその内容を見るのです。 たとえば… 悪いキャッチコピー：「DTP入門」 良いキャッチコピー：「初心者にオススメ！簡単にマスター出来る！楽して覚えるDTP入門」 ターゲットを絞って語りかける 不特定多数の人を対象にしているものよ
クリックさせるキャッチコピーの作り方 - livedoor ディレクター Blog(ブログ)
はじめまして、ライブドアキャリアを担当している小俣といいます。 いきなりですが、ライブドアにはたくさんの広告枠があることは、皆様ご存知かと思います。トップ以外の各コンテンツのヘッダー部分に出ている横長のバナーや、ニュース面に掲載されているテキストなどがその代表例でしょう。 その広告枠、常に完売状態なら万々歳なのですが、売れずに枠が空いてしまう場合もあります。 このような場合、売れなかったからといって空欄にするわけにはいかないため、フィラー（自社広告）を出します。 例えばテレビの場合、番組宣伝や公共広告機構の CM がフィラーとして使われます。 そしてライブドアの場合、自社広告は各コンテンツの広告を出すのですが、やはり自社の広告といえども広告。結構キャッチコピー１つで、クリックされる数が大きく変わってきます。 そこで以下に、効果的なキャッチコピー作成のための、３つコツを書かせていただきたいと
ウェブデザインのエレメントを今風にデザインするPhotoshopのチュートリアル集
最近のウェブデザインでよく使用されているエレメントの制作方法を1ステップずつ分かりやすく解説しているPhotoshopのチュートリアルをCarsonifiedから紹介します。
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
【黄金比・計算ツール・2カラム対応】 - 黄金比計算ツール
重要なお知らせ：このページのツールは、Flashの技術を用いて表示させていたため、現在は動かすことができません。申し訳ございませんが、ご了承下さい。 Webデザインに黄金比を取り入れよう - Re:Creator’s Kansaiに、黄金比をWebデザインに活用する海外の記事の翻訳が載っていました。 黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8です。「その美しさをWebデザインでも」というのがエントリの趣旨です。 Webデザインの場合、横幅を固定し、縦幅は固定しないデザインが一般的です（ディスプレイサイズを考え、文字数の増加は横方向のスクロールなしに、縦方向へのスクロールで対応している）。Flashで作られたサイトなどは、縦幅も横幅も固定している場合があります。 Webデザインに黄金比を取り入れようとした場合、全体の横幅と横幅の比からそ
ウノウラボ Unoh Labs: ECサイトのユーザビリティ・ガイドライン
こんばんわ、Sashaです。 最近、ECサイトのリニューアルを計画するお手伝いをする、という仕事がありました。特にユーザビリティ的な観点から、どんなことを網羅したらこのリニューアルを成功させることができるだろうか、ということを考えながら、様々なブログを参考にしたり実際のECサイトを検証したりしていたら、以前私が紹介したユーザビリティ・ガイドラインのようなチェックリスト的なものが出来上がったので、もしかしてどこかのだれかのお役に立つこともあるかもしれない、と思い、ここに紹介させていただきます。 まず、ECサイトで実現したい基本的な目標をあげ、その目標に沿って細かく、網羅していきたい事を列挙していきました。 基本的な目標とは、次の5項目です。 見つけたい商品・情報を見つけやすくする ユーザーの労力を極力削減する 買いたい気にさせる 購入までのプロセスを簡単にする オンラインショッピング
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Iconfinder | Search through 128,345 icons or browse 347 icon sets
Plus de 200 000 icônes gratuites sur Icones.pro !
Dreamweaver使いのための「生活に役立つ小ネタ集」 | デベロッパーセンター
HTML5とHTML4の違いが一目で分かるチートシート
リストに使える小さいサイズのアイコン素材集 ５サイト - DesignWalker
