サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
グリッドレイアウト ( グリッドデザイン、グリッドシステム ) はweb制作でのデザイン手法の一つです。 画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法です。 グリッドはさまざまなレイアウト間の一貫性を維持しデザイン上の意思決定を迅速化するのに役立ち。グリッドを使用すると様々なスクリーンサイズでの配置やレイアウトをより正確にコントロールすることができます。 元を辿るとグリッドシステムはヨゼフ・ミューラーブロックマン(Josef Müller-Brockmann, 1914年5月9日 - 1996年8月30日 スイスのGraphic designer )が考案したデザインの手法だそうです。 960 Grid System https://960.gs/ デモページ 960 Grid Systemはページ幅 960px(コン
historydesignersdevelopersaboutget rid of grid“Blasphemy, I need structure and order!” The web isgood at these things,just not in the ways that designers have been accustomed to working. We'll take a look at how wegot here and how we might change our perspective. Let's think outside of the grid and allow otherguidelines to provide a comprehensive layout. History of the design grid Back totop
Flow elements require space (sometimes referred to as white space) to physically and conceptually separate them from the elements that come before and after them. This is the purpose of the margin property. However, design systems conceive elements and components in isolation. At the time of conception,it is not settled whether there will be surrounding content or what the nature of that content
ランディングページがどのようにデザインされ、レイアウトされているのか、そしてコピーライティングがどのようにデザインされているのか、その参考資料となるアイデアをまとめたSaaS Pagesを紹介します。 ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザインの引き出しにストックしておきたいですね。 SaaS Pages SaaS Pagesでは、ランディングページに使用されるUIコンポーネントごとにデザインとコピーライティングがまとめられています。 ナビゲーションバー 目標到達のプロセスから遠ざかる方向にナビゲートしない。 分かりやすいCTAボタンがある。 ユーザーエクスペリエンスを向上させるスティッキーバー。 開発者向けのドキュメントなど、特別なリンクを含めたい場合。 Navbar ヒーローヘッダ 独自のセールスポイントを強調する。 「今
Sketchで作ったデザインをObjective-CやSwiftで書き出すツール「Sketch to Code」を開発中のAnimaから、Sketch用プラグインの「Auto Layout for Sketch」がリリースされました。 Auto Layout for Sketch Animaって何？という方はこちら！ これまで書いたAnima関連の記事 使い方 インストール まずはこちらのページからプラグインをダウンロードします。 ダウンロードしたSketchプラグインのファイルを開くと自動的にインストールされます。 ※Sketch to Codeのβ版をインストールしている場合、Sketch to CodeにAuto Layoutが上書きされてしまいます。Sketch to Code β版にはAuto Layout機能が含まれているのでインストールの必要はありません。 デザインを作成する
■デザインの基礎 これからデザインをはじめる人が知っておきたい、デザイン基礎を学ぶコースです。 『そもそもデザインってなんだろう？』という根本的な部分から、レイアウト、色、文字、デザインの考え方などを、各回ごとのテーマに沿って行っていきます。また、グラフィックデザインにおける実務での応用例などもお話しします。 第一回では「デザインとはなにか」「レイアウトの基本」について学んでいきます。前半ではデザイナーの種類や、デザイナーになる為に必要なちからを学び、後半ではレイアウトについて、レイアウトの４大原則、視線の誘導方法を学んでいきます。授業を通してデザインの基礎を固めていきましょう。 ■授業のアジェンダ ・デザインってなんだろう ・レイアウトのルール ・視線を誘導する
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind,it was important to us to keep our file sizes small, and everyline ofCSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
はじめに 高さ可変のテーブルビューセルを作成する方法はいくつかありますが、今回は「Storyboard」上で「Auto Layout」を設定することで実現してみます。環境は以下の通りです。 Xcode 5.1.1 SDK 7.1 Development Target 7.0 完成図 ↑こんな感じに仕上がります。 「Master-Detail Application」テンプレートに手を加えていきます。「Master-Detail Application」は画面上部のプラスボタンを押すと、現在時刻を表示するセルが増えるサンプルですが、セルのラベルを２つに増やし、高さが可変のラベル(ランダムな文字列を表示)と高さ固定のラベル(時刻を表示)が表示されるようにします。また、ラベルの高さに合わせてセルの高さも変わるようにします。 実装プロジェクト作成 XcodeのFileメニューから New → P
1 pixel｜サイバーエージェント公式クリエイターズブログサイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。Chromeの機能拡張 ローカル環境での使用（スタイルシートファイル）Chromeの機能拡張 下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストア インストールが完了すると、上部のバーにPesticideボ
このドメインは お名前.com から取得されました。 お名前.com はGMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
At Flipboard, we are working hard tobuild the world’s best personal magazine—a magazine madejust for you, filled with the stories you care about most. Magazine layout design plays a key role in telling those stories.Good layout design frames a story and impacts how you are informed by the content. For example, in the hallways of Sports Illustrated, editors hang up every page of the print editio
Androidの会福岡支部メンバー数人で輪講会をはじめました。 今回のお題は通称 yanzm本2 と言われている、AndroidUI Cookbook for 4.0 ICSアプリ開発術 です。 実はちょっと前に EffectiveJava 第2版 の輪講をやってみたのですが、 それがまたなかなかおもしろくて。 「人に伝えること」を前提にして熟読＋理解 実際に説明 議論 をするとこれがまた異常に充実感があるというか。 みんなでやいやい言いながら興味のあることを勉強するのはやっぱり楽しいですね。 「おい、勉強くらい本読んで1人でやれよ」と言われたらそれまでなんだけどもｗ というわけで、こんな感じで輪講会を進めてます。 進め方 各自予習必須 説明担当の人が本を音読しながら説明 サンプルアプリ動かしながら内容確認 説明してるときに気になった点、疑問点などを皆で議論 次回どこまでやるか＋次回
AndroidプログラミングのTOPへAndroidアプリのUIは，レイアウトXMLに記述する。 が，これが結構面倒くさい。 各ビューごとに大量の属性をコーディングすることになり， あとから見返すと，何の目的で属性を付与したのか不明だったりする。 また記述量が多いと，その分だけ変更時の修正作業量も増えてしまう。 どうすれば，AndroidのレイアウトXMLの記述をシンプルに短くできるか？ 下記では，基本的なTipsを７つ列挙する。 （１）IDE上で自動整形して見やすくする （２）複数のプロパティを，スタイルXML中でまとめて一括指定する （３）共通部分をincludeする （４）独自の性質を持ったViewを作成する （５）アプリ全体のスタイルをテーマに集約する （６）XMLに書かず，コードで動的に操作する （７）HTML5を使う （１）IDE上で自動整形して見やすくする まず，本質的でな
スマートフォンアプリのUI設計では各プラットフォームが出しているガイドラインに従うのが良いとされていますが、実際に配信されているスマートフォンアプリは、どの様に対応しているのでしょうか？ 今回は、iPhone、Androidでアプリを提供しスマートフォンアプリのUI設計では各プラットフォームが出しているガイドラインに従うのが良いとされていますが、実際に配信されているスマートフォンアプリは、どの様に対応しているのでしょうか？ 今回は、iPhone、Androidでアプリを提供しているサービスのUI設計の違いを比較してみました。 はじめにiPhoneとAndroidのアプリを比較してみたところUI設計には傾向があり、大きく３つのパターンに分類できることがわかりました。 実例を踏まえながらパターンを紹介していきます。※当然、例外はあります。 また今回はUI設計思考を見ているため細かいUIや
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: もっとクイズで学ぶデザイン・レイアウトの基本: ハラヒロシ, ハヤシアキコ, 平本久美子, ヤマダジュンヤ: Digital Ebook Purchas
