[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム全幅970px（960+10px）の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。 The Golden Grid ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。 6カラムの構成 1カラム：150px、マージン：10px 150*6+10*7=970px 12カラムの構成 1カラム：70px、マージン：10px 70*12+10*13=970px
氾濫原 [HANRANGEN]
こうする async function loadAsImage(svg) { return new Promise((resolve, reject) => { const svgXml = new XMLSerializer().serializeToString(svg); const blob = new Blob([svgXml], { type: 'image/svg+xml' }); const url = URL.createObjectURL(blob); const img = new Image(); img.onload = () => { URL.revokeObjectURL(url); resolve(img); }; img.onerror = (e) => { URL.revokeObjectURL(url); reject(e); }; img.src =
![氾濫原 [HANRANGEN]](https://cdn-ak-scissors.b.st-hatena.com/image/square/d554b399f7f2d0a20b6380146ec3dc9f957e856c/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2F-RQ_DKLAHLPk%2FXli8MqbCeaI%2FAAAAAAABwZM%2FQEm-rbJS0jI_YF1jqelVpizgYcw-RMC6wCE0YBhgL%2Fs2048%2FDSC08864-16MP.webp)
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
「紙っぽいデザイン」の特徴を盗め！イベントポスター事例から学ぶ、紙っぽいデザインの特徴。
quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね！みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙（ポスター、雑誌）のような完成図をイメージされることが多いのではないのでしょうか。（特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ！） それで今回はＬＰやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
印象に残る！斜めの要素をうま〜く取り入れているサイトまとめ
日本のみなさん、こんにちはぁ！バンクーバーに住んでいます、のび太です。 世の中にはいろんな種類のWebデザインがありますよね〜。レスポンシブ、フラット、ミニマル、フル画面、パララックスデザインetc。 その中でも僕が今一番注目しているのが斜めグリッドデザイン（英語だとDiagonal Grid Design。たぶん…）。スタイリッシュで強く印象に残ります。そして何と言っても、めっちゃカッコいい！ 今回は、僕が印象に残った斜めの要素をうまく取り入れた海外Webサイトをご紹介します。みなさんが斜めの要素を取り入れたデザインをする時の参考になればうれしいです。 斜めが印象的な海外Webサイト11選 Hocus Focus https://hocusfocus.no/ Case 3D https://www.case-3d.com/ Fifteen Robin https://fifteenrob
[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。
[CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout
IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ：Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024x768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。 デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることが
効果的にコンテンツを配置する代表的な3つのレイアウトとは
ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 グーテンベルグ ダイアグラム Zパターン レイアウト Fパターン レイアウト Pattern of Focal Points -情報の階層化 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。 これは特に、テキストの比重が高いコンテンツにはまります。 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムは4つの象
配置をマスターして「機能するレイアウト」を作る大切なポイント
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
メンテナンス
只今メンテナンス中です ただいまメンテナンスをおこなっており、一時的にご利用いただけない状態となっております。 ご迷惑をおかけし申し訳ございません。
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
by Alessandro Fulciniti In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility.
間口一就 まぐちかずなりの、ウェブサイト
Q.バーからお食事処へ、そして現在は「純喫茶」へと進化！？ 反響はどうですか？New まずまずの反響かな？ロックフィッシュはお酒がなくても楽しめるよ。塩っぱいおつまみは出せないけど、ピザとかサンドウィッチとか、ちょいとひねりのある軽食スナックあるよ。 Q.3種類のノンアルコールカクテルも開発したんですね？New この世界だと、ノンアルカクテルは当たり前で、20代の時にいっぱいつくったよ。だからそんなに困らずに作ったよ。 出血大サービスだ！えい！ 純喫茶かさごのメニュー モクテル あのハイボール：900円 (完成度高し！呑まないとー！) ビタール：900円 (苦味を足したビール風) ジンジャーリッキー：900円 (ごくごく呑めちゃうレモンと生姜味) お食事 壺漬けのピザ：900円 (ん？？と思いますがとっても美味) コンビーフのピザトースト：900円 (コチュジャントマトでさっぱり) チーズ
レイアウトの基本的な型と、レイアウトからデザインまでの流れ
Webサイトにおいて、レイアウトの基本的な型と、レイアウトからデザインまでの流れを簡単にまとめてみました。 レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。 また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。 レイアウトに影響を与える要因 レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。 情報階層の深さ →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など サイトの目的・属性 →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikiped
PhotoshoperにAndroidアプリのデザインをお願いする際の失敗例 - ReDo
伝説のSHARPハッカソンに参加してきました。 3月10日-11日に第4回SHARPハッカソン@東広島が開催されます http://d.hatena.ne.jp/bs-android/20120309/1331256472 ハッカソンそのもののなんたらはもうみんな書いてるので、僕が一番失敗した点のみピックアップしてご説明します。脳内垂れ流しなのでみんなはマネしないでね！ 会場で一番シェアの端末はぶっちぎりでGalaxy Nexus/ICSだったわけですが、ターゲットのシャープ端末はそんなことはないよねー、と。 参考：Android 通信キャリア 2011-2012秋冬春モデル一覧 http://greety.sakura.ne.jp/redo/2011/10/android-2011-2012.html そんなわけで、qHD（960x540）のhdpi端末をターゲットにお願いしちゃったわけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
treesaverjs.com
センスがなくてもチラシを組み立てられる電卓式レイアウト法 | 企業ホームページ運営の心得
Gridulator: Make pixel grids, lickety-split
Basic Design Note
