モリサワのフォントモリサワのフォントなら、使い手の思いをより明確に伝えることができます。フォントへのこだわりや書体見本、採用事例を各ページでご紹介します。 書体見本 モリサワと提携各社のバリエーション豊かなフォントをご覧いただけます。書体分類のほかメーカー名、収録製品、用途、イメージなどで検索することができます。多くのフォントでブラウザ上の試し書きが可能です。
配色でブランドが決定する
First impression : 人はWebサイトを見た瞬間に印象を決めている Webサイトを作成する際に、配色はなぜ重要なのでしょうか。はじめに下記Webサイトの配色を見てください。配色のみで、何かのブランドを想像できるでしょうか？ 上記のサイトは日本コカ・コーラ社のサイトです。この配色だけを見て何かしらのブランドが想像ができたならば、あなたは色を見てブランドのイメージを決めたということになります。それは、文章を1文字も読まず、配色だけで印象を決めたということですね。他にも、赤と白で配色されたブランドのロゴには以下のようなものがあります。 私たちは普段、新しいWebサイトを見た瞬間に「〇〇っぽいサイトだな」とか「〇〇系だな」など無意識にそのサイトを何かのカテゴリーに当てはめ、イメージを作っているのです。その全体的なイメージは色によるものです。 カナダのカールトン大学で行われた研究のレ
Webデザインのスキルを磨く10のポイント | FICCナレッジブログ | FICC
Jakob Nielsenは、「How Long Do Users Stay on Web Pages?」の記事にて「ページごとの平均滞在時間は1分弱となっており、実際に訪問しているページのテキストの4分の1しか読む時間がない」と述べています。もちろん、サイトの性質や使われ方にもよりますが、私達が制作しているページのうちの75%はほとんどのユーザーに読まれていないことになります。あなたもブログ記事のイントロを読み、途中をざっと流し読みして、最後のまとめだけを読んだ経験はありませんか？ 私達がサイトを閲覧する時の殆どは明確な目的を持っています。 必要とする情報以外のテキストをじっくり読むことはなく、自分が求めている情報を探すためにざっと斜め読みし、目当てとなる情報を探していることが殆どです。早急に答えを求めるユーザーにとって、あれもこれもと次々と情報を訴求するウェブサイトは、斜め読みされ、離
スマートフォンサイト制作【スマートネス】
”高品質”で”軽快”なスマートフォン対応サイト制作 Quality and Lightness. 制作事例Case Study スマホサイト「健康管理能力検定」様 このサイトを見る 事例の詳細を見る スマートフォンサイト制作 このサイトを見る 事例の詳細を見る TOEIC・TOEFLスクール「プレゼンス」様 スマホサイト このサイトを見る 事例の詳細を見る 制作事例をもっと見る お知らせ・新着情報Infomation 2016/04/01 リニューアル不要のスマホ対応サービス 2016/02/20 制作会社様からのご依頼について 2013/02/07 2月・3月の制作依頼について 制作サービスService 1 既存サイトを スマートフォンサイトに 2 WordpressmでPCサイトと スマートフォンサイトを連動 3 スマートフォンサイトと PCサイトを新しく制作 4 制作に関して ご注
Retina対応怖くない / ホームページ制作 東京[グリッドネス] / WEBデザイン制作
以前、iPhone4から採用されたRetinaディスプレイに対応すべきかどうかというブログを書きましたが、 ついにスマホだけじゃなくMacbookにもRetinaディスプレイが採用されたようですね。 Retinaディスプレイは通常のディスプレイに比べ、倍以上の高解像度のため、 プレーンテキストがかなり鮮明に見えるが、通常サイズ（表示サイズと画像のサイズが同じ）の画像がぼんやり見えてしまうという難点が。 PCは正直まだ全く高解像度ディスプレイに対応する必要は無いと思いますが、 スマホに関しては無視できない割合が高解像度ディスプレイになっています。 というわけで、 そんなに気が進まなかったけど、現行のiPhone4Sの解像度に対応したスマホサイトを作ってみました。 http://www.smart-ness4.com/i/ ↓iPhone4Sでのキャプチャ画面 対応方法の仕方としては、 ・ht
異なるブラウザでフォントサイズが同じに見える方法を実験してみた: 世界中の１％の人々へ
2009年11月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 文字サイズ100%でもブラウザによって基本文字サイズが違う。 画像は、このブログを異なるブラウザで開いたスクリーンショットを比較できるようにしたもの。左からInternet Explorer 8.0、Firefox3.5.5、Opera!10.01、Safari4.0.4、Google chrome3.0.195.33で、すべてWindows。 Firefoxの文字サイズが小さいことが一目瞭然。 CSSはこう指定してある。 ◇ベースフォントCSS body { font:100%; arial,helvetica,clean,sans-serif;←モダンブラウザ用 *font-size:medium;←IE
『記者ハンドブック 新聞用字用語集』で日本語の表記や表現を確認する - makitani.com
3～4年前から、『記者ハンドブック 新聞用字用語集』を使うようになりました。文章を書いていて、「この表現はひらがなに開いた方がいいのかな」「この場合の『あわせる』って、『合わせる』『併せる』のどっちだっけ」「『まね』『真似』『マネ』のどれ？」など、日本語の表記や表現を確認するのに重宝しています。僕が使っているのは、少し版が古いのですが、共同通信社のもの。 ライターでも何でもないのですが、「考え方を正しく伝えること」が仕事上不可欠なため、伝わりやすい日本語への意識が年々強くなっています。 先程メールで「真似」と書いて送信した後に、気になって調べてみたら「まね」と開くのが基準だそうです。まあ、その媒体や受け手の属性やその文章の雰囲気によっていろんな表現があっていいと思いますし、言語は生き物だと思いますので、間違いではないのですけれども。 と、ふと開いたページに気になる記述が。 十、アドレスの書
スライド「Webデザイナーのためのタイポグラフィと文字組版」｜DTP Transit
ご参考までに、このスライドはKeynoteで作っているのですが、（スライド公開時のみに表示している）画面の下のコメントを除き、メインの文字などはすべてIllustratorで入力して、Keynoteにコピー&ペーストしています。 理由は2つ。 Keynoteでは自動カーニング（文字ツメ）ができない Keynoteでは混植ができない（がんばればできるけど、ベースラインの調整などを行えない） ちょっとした修正などが面倒なので、気が狂っているとも思いますが、プレゼン資料における文字は、ある意味、すべてキャッチコピー。文字ツメが甘いのはいただけないと思うのです。 ちなみに、後で修正しやすいように、Illustratorドキュメントは残しています。 追記（2013年11月）： 続編があります。 スライド『Webデザイナーのためのタイポグラフィと文字組版（Reloaded）』 - DTP Transi
新聞・雑誌は3～5倍！『ジャンプ率』を意識して、見やすいWebサイトをデザインしよう | マミオン有限会社-パソコン・数学研修、法人研修
シニア層にとっての重要な情報源と言えば、やはり今でも「テレビ」と「新聞」です。 昨年のある調査では、新聞を「ほぼ毎日読んでいる」と回答したのは30代で4割程度なのに対し、60代では8割とおよそ倍の数値となっています。 画像参照： リサーチバンク - 自主アンケート・調査結果レポート また教室にいらっしゃるシニア層の方々は、新聞はもちろん雑誌もよく読まれており、週刊文春、週刊女性自身、週刊ダイヤモンドなどの人気が高いです。 ちなみに私自身は田舎から東京に出てきてもう10数年、ニュースはインターネットで事足りてしまって、紙の新聞をとったことはありませんでした。しかし先月から教室で紙の日経新聞を読めるようになり、久しぶりに落ち着いて目にしてみると、「やっぱり新聞って見やすいなぁ」と思ってしまうんです。 また先日iPadにインストールした雑誌閲覧アプリの『ビューン』は、iPadの使い方とマッチして
Webdesign is 95% typography. Period.
95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography. Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites: Today we are inundated with
Webデザイナーなら知っておきたいWebタイポグラフィの基本 | FICCナレッジブログ | FICC
Webサイトを閲覧していて、文字を読まないということは滅多にありません。情報アーキテクチャの先駆者として世界的に有名なInformation Architectsは、「Web Design is 95% Typograpy」という記事で、「Webデザインの95%はタイポグラフィである」と述べています。 私たちの行動は文字によって喚起されます。例えば、オンラインショッピングをするときに、商品のイメージだけで購入することはほとんどないのではないでしょうか。価格をはじめ、特徴や仕様、レビューなど、文字が伝える情報を咀嚼して購買を決定しているはずです。オンラインショップは実店舗とは違い、商品を手にとって確認することができませんから、文字から伝わる情報がより重要性を増すのです。 これらは、タイポグラフィのデザインがWebデザインにとって無くてはならない役割を担っている証拠だと言えるでしょう。 それで
Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き
私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー（私）によるDTPデザイン注意書き：Webと
タイポグラフィの基礎 – 文字の扱いで印象が変わる - - EC studio デザインブログ
こんにちは。新免です。 普段から私たちは沢山の文字を目にする機会があります。 文字は身の回りに溢れており、私たちに様々な情報や 印象を与えてくれます。 文字はただ読み物として情報を伝えるだけではなく、 文字をデザインに落とし込むことで様々な印象を 与えることになります。そのため、デザインをする上で 文字の扱は非常に気をつけなければいけません。 そこで今回は、文字の扱い方で気をつけていることの 基本的な部分をまとめてみようと思います。 フォントの統一 フォントは和文フォントの中に「明朝体」「ゴシック体」、 欧文フォントの中にも「セリフ体」「サンセリフ体」という種類があり、 その中にも様々なフォントがあり、選ぶのに迷ってしまうほどです。 ただし、いろんな種類のフォントがあるからといって、異なるフォントを 多数使ってしまうと、イメージに違和感が出てしまいます。 フォントは作るビジュアルの雰囲気に
[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
4カ月で新サービスを立ち上げるくらいじゃないと世界は変わらない
あなたが起業するとしたら、または会社で新規事業を立ち上げるように言われたら、サービス開始や商品発売の時期をどのくらい先に設定するだろうか。 筆者なら、半年は難しい、1年先なら大丈夫かもしれない――と答えるだろう。いや、ビジネスモデルを固めて、サイトや商品を開発して、投資家から資金調達して（会社なら予算を取って）、必要なら他社と提携するなどパートナーを見付けて、プロモーションもしなくてはいけない。こう考えてみると、やることがありすぎて1年先でも難しいような気もする。何しろ、新規事業ではなく日々担当している単行本の編集でも、同時並行で進めているとはいえ、筆者は、1冊の本を作るのに半年から1年をかけているくらいだ。 しかし、筆者が想像するスピードでは遅すぎる――。このことを思い知らされたのは、新刊『GILT―ITとファッションで世界を変える私たちの起業ストーリー』という本の編集を担当したからだ。
jQuery 2.0がついに正式リリース。IE8以前はサポートせず、より軽量で高速に
jQuery 2.0は、jQuery 1.xからのメジャーバージョンアップになりますが、APIの変更や大きな機能追加はありません。Internet Explorer 6/7/8のサポートを廃止することで、これらのサポートに必要だった細かなハックを一掃、いわゆるモダンブラウザにフォーカスしてコードを書き直すことにより、より小さく、速く、安定した動作を目指したものです。 jQuery 2.0はjQuery 1.9.1に比べて12％小さくなっています。 今後もjQuery 2.0では古くなった環境のサポートを廃止することで、より軽量で高速なライブラリを目指す予定で、次にサポート廃止予定なのはAndroid/WebKit 2.xのWebブラウザ。利用シェアの推移を見つつ、それほど遠くないうちに廃止される見通しだと説明されています。 jQuery 2.0の登場により、今後はInternet Expl
面白くて一気読みしたオススメWeb漫画まとめ 12連弾【完結あり】 - bekkou68 の日記
はじめに 最近 Web漫画にハマってます。ちょっとした空き時間に読めるのでお手軽に楽しめるのが好きです^^ なんだかんだで30作ほど読んだのですが、そのなかでも特にオススメするものを 12作ピックアップして紹介します。 すべて無料で読めます。書籍化されている作品もあります。【完結】マークがある作品は完結しています。マークがない作品は現在連載中です。 あまり長々と紹介するのはヤボなので紹介文は短めです。まずは読んでみてください^^ 1. ワンパンマン ヒーローもの。キャラ・ストーリがとても魅力的です！ サイタマかっこいいｗ 最近アイシールド21 の村田雄介さんがコラボしてリメイクも出ています。ハイクオリティな作画が楽しめます。 2. 魔界のオッサン ギャグもの。独特の世界観に引きこまれていきます。魅せ方がうまいって思います。 3. 今を逝きる。【完結】 学校生活もの。心にグッとくる何かがあり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: 記者ハンドブック 第12版 新聞用字用語集: 一般社団法人共同通信社編著: 本
http://blueberrycheesecake.net/fontsize/font-size.html
Amazon.co.jp: Typographic Systems―美しい文字レイアウト、8つのシステム: Kimberly Elam (著), 今井ゆう子 (翻訳): 本
INTERVIEW インターネットはクラシック音楽を救えるか？ ベルリン・フィルの革新と挑戦
ヒトが本屋を愛し続ける理由：『世界の夢の本屋さん』『世界の夢の本屋さん2』から