アダプディブデザインか、レスポンシブデザインか
アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。 UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます。それはそれでいいのですが、現場の人々の中にはアダプティブデザインというものがあることを知らない人もいます。 では、早速本題に入りましょう。 レスポンシブデザインでは、ブラウザのビューポート（表示領域）に基づいてWebサイトの見え方が変わります。通常、開発者はブラウザの幅によってページ上の要素を動的に変化させます。 レスポンシブなWebサイトは完全に流動的で、スクリーンサイズではなくビューポートに対応します。なぜならレスポンシブなWebサイトは、パーセンテージに基づいたCSSの指定を用いる
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
簡単！ロゴ作成やフライヤー作成にオススメのツール23選
会社、お店、新規事業、イベントを始めるにあたって、顔となるロゴ（LOGO）や告知ツールであるフライヤーは非常に重要な要素です。しかし、プロのデザイナーに頼むと費用もそれなりにかかりますし、かといって自分ではデザイン出来ない、とお悩みの方も多いのではないでしょうか。 今回は、ブラウザ上で使えるロゴ作成やフライヤー作成にオススメのフリーツールをまとめてご紹介いたします。ダウンロードが不要で、Windows/Mac問わず使えるものばかりです。無料でもクオリティの高いロゴ、フライヤーを作成することができますので、気になるものがあれば使ってみてください。 1.ロゴ作成ジェネレーター Cool Text https://ja.cooltext.com/ 用意してあるロゴスタイルから好みのものを選んで、サクッとオリジナルのロゴを作成することができるジェネレーターです。 現在115個のスタイルから選ぶこと
使いやすさをデザインする上で心掛けていること - Mackerel お知らせ #mackerelio
こんにちは。デザイナーの id:murata_s です。Mackerelのリリース当初からMackerelの画面設計やUX、ユーザビリティなどのデザイン業務全般を担当しています。 今回は、主にエンジニアさんのためのツールであるMackerelをデザインする際に id:murata_s が気をつけている点を紹介します。ユーザーにとって必要な情報を分かりやすく伝え、迷わないデザインを施すにはどういった配慮が必要か、製品の振る舞いのデザインについてMackerelの事例を交えながら考えてみたいと思います。 Mackerelは言わばソフトウェアであり管理画面ですから、一般に言われるウェブサービスよりもツールとしての側面が強いサービスだと思います。雑誌の誌面ではなく、車のダッシュボードをつくっているようなもので、グラフィックデザイン的な情報設計の考え方が前提となりつつも、それに加えてプロダクトデザイ
【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons | Stronghold Archive
どうもこんにちは、Honma です。今回の Tips は CSS のみで作れる吹き出しのデモです。簡単なツールチップなどにも利用できるかと思います。 CSSのみの吹き出し 5パターン×4方向 CSS は長くなるので全てデモページに記載してあります。 吹き出しの仕組み自体は :before :after 要素に三角形や円を作ることで表現しています。 Balloon 4 がうまく表示されない場合は z-index による可能性が高いので、吹き出しを囲う container の 値を 1 にするなど各自調節してみてください。 また、簡単に吹き出しを作るジェネレーター もありますので参考までに！ 以上になります。
【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
