非美大卒でも1年半でNewsPicksのデザイナーになれる本16冊｜yoshikawa akane｜note
こんにちは、NewsPicksのデザイナーのよっしーです。 NewsPicks Adventカレンダー16日目を担当させていただくことになりました。とても緊張します...。 9月に入社し現在NewsPicksのアプリの機能改善やブランドの共通言語になるデザインシステム構築、広告バナーやイベント周りのデザイン、採用にも関わらせていただいています。つい一昨日にありがたいことに開発チームの新人賞をいただきました。 そんな私は2年前、デザインを全く知らない人間でした。4年間非デザイン職について、いまでは会員数300万人・有料会員数8万人のNewsPicksのプロダクトデザイナーとしてやらせていただいています。独学でwebやUIデザインを学んできた私にとって、本は師匠です。そこで今回「デザインの基礎」「美大卒アートディレクターから学ぶブランドデザインの思考」「ユーザー体験設計」の3つ分けてその一部を
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
効果的にコンテンツを配置する代表的な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つで、鉄道写真家の中井精也さんが提唱している方法です。 一般的によく知られている構図では三分割法があります。三分割法では画面を縦と横それぞれに三分割する線が交差する点に被写体を配置します。 しかし、この方法では中心点から被写体が近くなります。そこで、被写体を中心点からもう少し離すために使われるのがレイルマン比率です。 レイルマン比率では、画面を縦にまず4分割します。 その4分割する縦の線と対角線との交点から中心の点を除いた4点のどこかに被写体を配置します。 ↓被写体を右下のポイントに配置します。 ↓そして出来上がった写真です。 縦位置でも使えます。 被写体を配置します。主題の女性ではなく、あえてアイスクリームにピントをあてます。 出来上がった写真がこれです： この方法で撮影すると三分割法と比べた場合、被写体が中心からもう少し離れます。
レスポンシブデザインを採用するとき参考にしたいフォーム実例まとめ | UI改善ブログ by f-tra
昨今レスポンシブ・ウェブデザインを採用するウェブサイトがかなり多くなっています。 レスポンシブなデザインの場合、フォームのユーザビリティを確保するには一手間工夫が必要です。 本日は、異なる画面幅でもフォームを使いやすく工夫しているウェブサイトを勝手にピックアップし、そのポイントをお伝えしていきます。 パターン1: あらかじめ横幅を狭くレイアウトする まずは、フォームのページのみ、他のページに比べて横幅を狭く作っておく方法でモバイルデバイスに対応している例を紹介していきます。 このとき多くの場合、横幅を狭くした分左右の余白が大きくなります。 採用例 住友商事 住友商事様のコーポレートサイトでは、他のページのコンテンツ（上）は920pxでレイアウトされているのに対し、フォームのページ（下）では横幅670pxとなっています。 横幅を狭めた場合、ナビゲーション類はレスポンシブ向けにコンパクトに収ま
CSSで2カラムを作ってみる - kojika17
CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい
名刺レイアウト:基本編
名刺レイアウトデザインの手順 ■ 自分で名刺作成、名刺の作り方は難しくありません。楽しんで頑張りましょう。最終的にはこんな名刺を作ります。このページのレイアウト方法は、あくまでも一例です。名刺のレイアウト＆デザインは、絶対こうでなければならないという基本手法や絶対の答えはないと思いますし、お仕事の内容やこんな名刺が欲しい、作りたいという要望によって、さまざまだと思います。レイアウトの方法を順を追って丁寧にご紹介。あとは皆さんのアイデアで、もっともっとカッコイイ名刺をお作りください。少しでも皆さんの名刺自作、手作りにお役に立てれば幸いです。あなたなりの名刺デザインの方法を見つけてください。 ■ レイアウトの前に、名刺記載原稿(テキスト)を考える。 ■ 1：原稿編で確定したテキストを、名刺のスペースに。 ■ 先の原稿編で作成したテキストを、左揃えの和文細ゴシックで、名刺のスペースに、とりあえず
よこ並びのCSS
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
集客チラシ講座 レイアウト
■集客チラシ講座 レイアウト 今回からチラシの制作について解説を始めます。 チラシを作る要素にはキャッチコピー、写真、商品説明、買ってもらうた めの文章、店名社名、地図、連絡先などがあります。 これらの要素をどのように並べるかによって、チラシの出来栄えが変わり ます。見やすい、読みやすい、わかりやすいレイアウトをするための基本 を解説していきます。 白い何もない紙の上にレイアウトをどのようにしていくのか？ チラシに はそれなりのルールがあります。 まず最初に決めるのはキャッチコピーの位置です。 これは簡単に決められます。チラシの上部に横組みで一行から二行にする パターンとチラシの右端に縦一行で入れるパターンの２種類です。この２ 種類が基本になります。 基本以外にチラシの中央に横一行または縦一行という配置の仕方もありま すが、これは結構難しいので止めたほうが良いです。なぜ難しいかと言う とキ
Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き
私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー（私）によるDTPデザイン注意書き：Webと
ページの幅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種類のレイアウトを見ることが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1カラムレイアウトはもはや王道! Webサイトデザインの基本を解説 | Webデザイン、これからどうなるの？（全10回）
The Blog | Welcome to Adobe Blog
構図とレイアウト
Basic Design Note
Home