続編/さらにプロっぽくなった！フォントに関するまとめ
作成：2013/11/11 更新：2014/10/24 Webデザイン > 前回フォントや「文字」に関するまとめを書きましたが、書き足りないことが結構あったので、続編を作りました。今回は自分の勉強もかねて、フォントに関する基礎知識、アキ、段組み、詰め、図版などデザインに携わるなら知っておきたい知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 文字の基礎知識 １．文字用語 組版 ２．組版(くみはん) ３．禁則処理 ４．追い込み／追い出し／ぶらさがり ５．段間 行間(レディング) ６．アキ ７．行長 ８．段組み ９．黄金比 詰め １０．プロポーショナル詰め １１．音引き １２．拗音(ようおん) １３．合成フォント 余白 １４．近接と遠隔 １５．版面（はんづら） 図版 １７．図版率 １８．訴求度 文字の基礎知識 １．文字用語 頻繁に出てくる、ちょ
現代デザイン
現代デザインはWebサイトを集めたギャラリー･リンク集です。トップデザイン・下層デザインを一覧で確認出来るのが特徴です。毎日更新を目標にしています！（出来なかったらごめんなさい）Webデザイン制作の参考にどうぞご活用ください。
アイデアがガンガン降り注ぐ、Webデザインの参考になるギャラリー集
作成：2016/08/16 Webデザイン > ありきたりのWebデザインギャラリーではなく、グリッド線が入っているもの、料金表専門、インフォグラフィックスやグリッド・404・サイドバーなど、少し掘り下げたようなWebデザインギャラリーをまとめました。暇な時に見ているとインスピレーションが湧くはずです。パーツごとに分類。 エンジニア速報は Twitter の@commteで配信しています。 料金ページ 今月話題となった料金ページのみをまとめてあるTumblr製のプライスページギャラリー集。ブログなどに埋め込み可能。 Pricing Pages グリッド参考 スクリーンショットにグリッドを入れてある、グラフィック(紙)やWebのデザインルールがひと目で分かるWebデザインギャラリー集。手間がかかってます。 Grids 404ページ 404ページのみ集めてあります。背景にどんな写真を使ってある
バイオハザードのマークはどのようにデザインされたのか？
by Tony Webster 細菌やウイルスなどの有害物質が、実験室や病院から外部へ漏れ出して引き起こる災害を「バイオハザード(生物災害)」と呼び、有害物質の存在について警告するためのシンボルマークが制定されています。このシンボルマークが一体どのように作られたのかを、デザインや建築について語るラジオ番組「99% Invisible」が解説しています。 Biohazard: Iconic Symbol Designed to be “Memorable but Meaningless” - 99% Invisible http://99percentinvisible.org/article/biohazard-symbol-designed-to-be-memorable-but-meaningless/ バイオハザードのシンボルマークが統一される以前は、危険物質の存在を示すマークが山の
Googleのマテリアルデザインの「動き」がどのような法則に従っているのかがよくわかるムービー「Material Design Motion」
Googleが2014年に公開した「マテリアルデザイン」は、単純な「OSのデザイン」ではなく実用性に加えて「素材」や「現実の感覚」を取り入れた独特のデザインフレームワークになっています。アニメーションを用いて、「動き」にもこだわることでプロダクトの品質を向上させているとのことですが、マテリアルデザインの「動き」がどのような法則にのっとっているのか、わかりやすいムービーが公開中です。 まず、マテリアルデザインの「動き」はどのような点で他のアプリやソフトウェアデザインと異なるのか？というこだわりの概要は以下のムービーからサクッと理解できます。 Material Design Motion - YouTube マテリアルデザインは、現実世界を生きている私たちのような「命」が感じられることが特徴です。 反応がよく、自然で、意識的。 そして、意図を持って動きます。 スマートフォンのスクリーンの形をし
ウェブサイトをデザインするときにインスピレーションを刺激するUIを集めた「Inspiration UI」
インターネット上に存在する無数のウェブサイトの中から優れたUIのものだけを大量に集め、「404ページ」「マップ」「ショッピングカート」など、UIの優れた部分でカテゴリ分けすることで、デザインの中で参考にしたいポイントを自由に検索できるようにしたサイトが「Inspiration UI」です。 Inspiration UI - Find design inspiration from real live projects http://inspirationui.com/ 「Inspiration UI」のトップページ上部には「Popular」「Recent」「All Patterns」と書かれたタグがあります。 トップページを開いた際には「Popular」が選択された状態になっており、Inspiration UIで人気の高いサイトがズラリと表示されています。 マウスオーバーすると、ウェブサイ
映画に使われる「色」の印象を集めたムービー「COLOR PSYCHOLOGY」
映画の中では、場面に合わせたさまざまな色が使われています。そんな「色」が観客に与える印象を、有名な映画を例にして解説したムービーが「COLOR PSYCHOLOGY」です。 COLOR PSYCHOLOGY on Vimeo ピンクは「純真」「無邪気」といった印象を与えます。「マレフィセント」に登場する幼少期のオーロラ姫はピンクの花に囲まれていました。 「マイ・ガール」では子ども部屋の内装をピンクで統一。 「6才のボクが、大人になるまで。」にもピンク色の寝具が出てきます。 また、ピンク色は「甘さ」も表します。「マリー・アントワネット」ではピンク色のお菓子がたくさん登場。 「グリース」に登場する女性グループ「ピンク・レディース」のフレンチーという少女は、髪の毛・衣装・食べているガムまですべてピンク色。 「グランド・ブダペスト・ホテル」ではピンク色のカップケーキの箱に主人公2人が飛び込むシーン
マスターカードが20年ぶりにロゴを更新、よりシンプルなデザインへと変更される - GIGAZINE
VISAカードと並んで世界的なクレジットカードブランドのマスターカードが、約20年ぶりにロゴを更新することを発表しました。今回の変更の狙いには、同ブランドが全世界的に進めているモバイルのデジタル決済サービス「MasterPass」の展開が視野に入れられているようです。 Mastercard Updates its Iconic Logo and Brand Identity http://newsroom.mastercard.com/news-briefs/mastercard-updates-its-iconic-logo-and-brand-identity/ Brand New: New Logo and Identity for MasterCard by Pentagram http://www.underconsideration.com/brandnew/archives/
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
Webデザインのプロのテクニックを非常に簡潔に分かりやすくまとめた -Web Design in 4 minutes
Webページやブログ、プロダクトページ、ポートフォリオなど、ちょっとした工夫でプロがつくったかのようにかっこよく、魅力的に見せるテクニックを4分で学べるコンテンツを紹介します。
【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由 | TechAcademyマガジン
【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由 Webサイトを作る上でグリッドデザインが良い理由について述べています。レスポンシブデザインなどデバイスに対応するWebデザインが主流になっていますが、これからWebデザイナーを目指している方は必見の内容でしょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を
フォントや文字のデザインをUI上で見やすくするコツをまとめた「Typography for User Interfaces」
by Marco / Zak ウェブサイトやアプリをデザインするにあたって、使いやすい・読みやすいコンテンツを作成するために必ず考えなければいけないのが「情報をどのように配置するのか」ということ。情報の多くは文字や文章で表示されるということで、ウェブデザイナーのViljami Salminenさんが、なぜウェブデザインにとって文字列が重要になるのか、どうすれば読みやすい文字列をデザインできるのかをまとめています。 Typography for User Interfaces | Viljami Salminen https://viljamis.com/2016/typography-for-user-interfaces/ ◆グラフィカルユーザインタフェース(GUI)の成り立ち GUIの歴史の中で重要な転換点にいるのが、マウスによるウィンドウ操作を初めて導入したゼロックスのコンピューター
GIGAZINE ギガジン
私たちは過去最高の大ヒットを記録しているのと裏腹に価格高騰などの影響でサーバー運営が非常に苦しい状態です。打てる手は全て打ちましたが、それでもまだ危機的状況にあります。なので、GIGAZINEの物理的なサーバーたちを、たった1円でも良いので読者の皆さまに支援してもらえればとっても助かります！今すぐ1回払いの寄付は上のボタンから、毎月寄付はこちらのリンク先から！
黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
黄金比や黄金螺旋を使い、Webサイト、雑誌や同人誌の表紙、フライヤーなどのレイアウト、コンテンツの配置、余白のとり方、写真の構図、オブジェクトの形のデザインにうまく取り入れるデザインテクニックを紹介します。 以前に1,000ブクマ越えの「黄金比をサイトのデザインに取り入れる簡単な３つの方法」を記事にしましたが、黄金比の取り入れ方もいろいろ進化しています！ What Is The Golden Ratio? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 黄金比（Golden Ratio）とは 1. 黄金比をレイアウトに使う 2. 黄金比をスペースに使う 3. 黄金比をコンテンツに使う 4. 黄金比を写真の構図に使う 5. 黄金比を形に使う エジプトのピラミッド、ダヴィンチのモナリザ、これらとTwitterやペプシのロゴとの共通点は何で
2016年のロゴデザインのトレンド -2016 Logo Trend Report
「Ombré（オンブレ）」とはここ数年、海外セレブたちが火付け役となって人気になったオンブレヘアーの美しいグラデーションで、特定の2色間をグラデーションでつなぐデザインです。ロゴデザインではこのグラデーションをベクターベースの面白い形状で色分けして利用しています。 Circles 完璧と無限を表現する美しいサークルは、非常に人気が高いデザイン要素です。最近のトレンドは、サークルの上にサークルを重ねたり、繰り返して使用しています。こういった幾何学的な形はシンプルであればあるほど良く、要素に区別をつける時にはフラットにしたり透明にしたり、グラデーションにしても効果的です。 Half and Half
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Grids跡地
【公式】テックキャンプ | 国内最大級プログラミングスクール on Twitter: "【デザイン1day速習会開催のお知らせ】 基礎的なデザインスキルを1日手を動かして学んでいただく速習講座です。 1ヶ月ガッツリは難しいが1日で完結させたいと考える未経験者の方、また予備知識として学習したいエンジニアの方大歓迎です。 https://t.co/4OJqHtixJy"
ユーザビリティの大原則は「ユーザーに考えさせないこと」 - 7/16～7/22のWeb担の記事まとめ | 先週のWeb担まとめ記事 | Web担当者Forum
まさとらん on Twitter: "とても実践的なスマホ向けの「Webパフォーマンス改善例」が勉強になった。早速試してみる…丨モバイルWebのUIを速くする基本テクニックがわかる─Google I/O 2016 High Performance Web UI https://t.co/zQDgH4kIJE"
Facebook
