タイポグラフィーと錯視調整の話
この記事は2021夏のブログリレー40日目の記事です。 こんにちは、20Bの@tararira です。夏休みも残り2週間ですね。（？） タイプデザイナーから学ぶ錯視タイプデザイナーとは、かなりざっくり言えば、フォントを作る職人です。 文字を観察してみると、タイプデザイナーが各所に散りばめた工夫やセンスが見えてきてとても面白いです。 まずは文字を観察してみる形の話たとえば、'X' 'Z' 'H' '8' といった文字は水平線に対して対称的に見えますが、実はどれも上側のほうが小さく設計されています。 青が正方向、赤が180度回転させたものこれは、上部は下部よりも膨張しているようにみえてしまう錯覚を考慮しているからです。 上の円が大きく見え、縦の線が長く見えてしまうと思いますこの錯視は、上方距離過大の錯視と呼ばれています。 もちろん、あえてそう設計していないフォントもあります。 また下の例で
デザインのバージョン管理をする世界
僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ
黄金比と白銀比 - 初心者のためのデザイン雑学
「黄金比」に対して「白銀比」と呼ばれる比率があります。 「白銀比」は「大和比」とも言われ、仏像の顔や、法隆寺の五重塔を上からみた形状など、 日本の建築や彫刻、生け花などに多く用いられてきた比率です。 日本人に馴染み易い感覚の様に言われています。 西洋人は「黄金比」を好み、日本人は「白銀比」を好むと言う説もありますが・・・？ 足の長さかな？ 皆さんが良く知っている「A判」・「B判」と呼ばれる用紙サイズも「白銀比」です。 「B1」の半分が「B2」、その半分が「B3」です。 「B3」は「四つ切り」とも言い、 「車内吊りポスター」は「四つ切りポスター」とも言います。 「A1」も「B1」も、「横1：縦√2」の比率は何度半分に断裁しても 1：√2の関係は変わりません。実に良くできています。 つまり、「A1も「B1」も「A2」も「B2」も「A3」も「B3」もすべて 「横1：縦√2」の比率です。 だから、
【長文注意】kulerを使った誰にでもできそうなWeb配色 | フォルトゥナ ブログ
色ってそんなにセンスは関係ないですよ 「色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ」という記事があったので、思うところとかを含めて配色の方法についてまとめてみました。私の方ではもう少し具体的な配色の方法についてもまとめたいと思います。 いつもWebカラーセミナーで話すのは、配色に関する問題の8割は知識で解決するということです。「色彩のセンスがない」という人はそもそもその勉強をしたことがないという人が多く、勉強したことのある人は「色は難しい」と仰います。逆に数十年グラフィックデザインをやっていても、Webの配色としてはまったくできていないということも多々あります。これはセンスではなくWebでのセオリーがわかっていないということになります。 センスと知識や学習していないことを同列に扱うのはおかしいですね。 デザイナーで色の勉強をまったくしたことがないという人はやや問題がある
46 Fabulous iOS Icon Designs - DesignM.ag
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact
miyahan.com | 液晶ディスプレイとカラーマネージメント
液晶ディスプレイとカラーマネージメント 編 このページは、Apple MacBook Pro に関するトピックをまとめた「myLife with MacBook Pro」で、 大変反響を呼んだ WUXGA ワイド液晶ディスプレイに関するトピックを独立させたものです。 ◆ ページが正常に表示されていない可能性があります ◆ もしこのメッセージが表示されている場合、ページの表示に必要なファイルが読み込まれていないか、あなたがレガシーウェブブラウザを使用している可能性があります。 このウェブサイトは比較的新しいテクノロジーで制作されているため、Netscape 4、Internet Explorer 6 などの旧世代Webブラウザでは閲覧に支障を来すおそれがあります。 またこのようなブラウザは、セキュリティが不十分な可能性があります。当サイトでは、Firefox、Opera、Safari 等の安
UX/UIデザインガイドライン : 小野和俊のブログ
このところ、アプレッソの中でも、MIJS製品技術委員会でも、自分たちのソフトウェアのUX/UIをブラッシュアップしていくためにどんなことができるのかをディスカッションしている。 UX/UIデザインガイドラインとして各社の推奨する指針をまとめたものがWebで公開されているので、プログラマーであれデザイナーであれ、ソフトウェアの画面設計に何らかの形で携わるのであれば、基礎知識として主要なものには目を通し、プログラマーがデザインパターンの用語で手短にコミュニケーションが取れるのと同じように、「ここは○○ガイドラインの△△パターンを使うのはどうかな？」というような会話ができるようにしていきたいと思っている。 ■ Apple ・アップル ヒューマンインターフェースガイドライン ・iOSヒューマンインターフェースガイドライン(PDF) ・iPadヒューマンインターフェースガイドライン(PDF) ■ M
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
黄金比、フィボナッチ数列、ファイブエレメンツ、サインウェーブなど数学的な要素を巧みにウェブデザインに取り入れる方法をSmashing Magazineから紹介します。 Applying Mathematics To Web Design 下記は各ポイントを意訳したものです。 また、当サイトでも黄金比をウェブデザインに取り入れる簡単な方法を紹介していますので、あわせてどうぞ。 黄金比をサイトのデザインに取り入れる簡単な３つの方法 はじめに 1. 黄金比（黄金四角形） 2. フィボナッチ数列 3. ファイブエレメンツ 4. サインウェーブ [ad#ad-2] はじめに 「数学は美です。」 数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。 数学ははるか昔から今日まで芸術や建築のデザインに
UXデザイナー(User Experience Designer)は本当に必要なのか？ / Maka-Veli .com
※超今更です。今更UXかよと言われそうで恥ずかしいんですが、まだまだUIとUXが混同されがちだなーというのと、じゃあUXって必要なのかよ？というモヤモヤを整理したいなと思い書きました。 UXデザインとは まず前提ですが、UX(User Experience)デザインとは、 ユーザーエクスペリエンス（UXと略記されることが多い）とは、ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語である。ウェブ上での商品販売などソフトウェアやビジネスに関連して使われることが多いが、インタラクションデザイン全般に適用される概念である。例えば自動音声応答装置は貧しいユーザーエクスペリエンスをもたらすデザインとしてよく引き合いに出される。VIA:Wikipedia と、あります。 ユーザーエクスペリエンス＝直訳するとユーザーの経験・体験と翻訳されますが、ユーザーが満足するかしな
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
いつ来るか分からない15分のために常に準備をしているのがプロ、デザイナー奥山清行による「ムーンショット」デザイン幸福論
「自分が考えていることを、その場で決められた時間の中で他の人とシェアしないのは、プロとして犯罪に近い」 「プロというのはシステムで仕事をする人間である」 「いつ来るか分からない15分のために常に準備をしているのがプロで、来ないかもしれないからと言って準備をしないのがアマチュア」 などなど、非常に刺激的な言葉が次々と飛び出したのが、CEDEC2011の2日目基調講演「「ムーンショット」 デザイン幸福論」です。 国際的な活躍を続けるインダストリアルデザイナー、奥山清行氏による講演となっており、「実際に会場にいらした方に直接語りかけたい」という本人の強い希望によって、ニコニコ動画「CEDECチャンネル」での配信や講演資料の配布はなし、「最後の瞬間まで講演内容を考えたい」ということで演題・内容についての事前発表もなし、という直前まで謎のベールに包まれていた講演だったのですが、見ての通り少し書き出し
色彩センスのいらない配色講座
3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
jQuery逆引き | Webサイト制作支援 | ShanaBrian Website
デザインやインターフェースなどjQueryを利用した様々なサンプルを掲載しています。 また、jQueryを利用した独自ライブラリなども配布しています。 ※ 不定期で更新を行っています。 文字・数値 文字の大きさを取得 フォントサイズの変化を検知しイベントを発火させる 要素に適用されているCSSのmarginを取得 要素に適用されているCSSのpaddingを取得 要素に適用されているCSSのborderを取得 要素に適用されている縦横幅を取得 文字数のカウント 日付・時間・季節 カレンダー 現在の日時をリアルタイムで取得（ローカル） DOM・Node・要素・属性 自身の要素をHTML文字列で取得 自身の要素をHTML文字列で取得 直下（子要素）のテキストノードを取得 直下のラッパー要素を削除（wrapInnerの削除版） リンク領域の拡大 要素の高さ揃え 属性の存在を確認 複数のクラス名の
WhatTimeIsIt_Jp 機能仕様書
これはソフトウェアマネジメントに関するサイトJoel on Softwareの機能仕様書サンプルです。教育目的で作られており、すべてがいかに馬鹿げているかお気付きにならない方のために申しますと、言及されているのは現実の製品ではありません。(特に頭の鈍い部類の)ベンチャーキャピタリストへの注意: この製品アイディアは、事前評価額2000万ドルに対する500万ドルの追加投資で構築することができます。 WhatTimeIsIt.com 機能仕様書 ジョエル･スポルスキ 最終更新日: 2000/9/27 - 極秘 - © 2000 Fog Creek Software, Inc. All Rights Reserved. 概要 WhatTimeIsIt.comはWeb上で現在時刻を人々に知らせるサービスである。 この仕様書は、いかに想像力をたくましくしようと、不完全である。すべての文言は完成までに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch
jQuery Mobileカスタマイズ自由自在
kuler
http://handywebdesign.net/2012/07/12colors-give-you-the-impression/
企画が考えるスマホUIデザイン
