2011Web制作の基礎から学べる「スマートフォン時代のWebコーディングスクール」5月に初回体験レッスン開催!渋谷でも動画でも受講可能です。現在は状況が異なる可能性がありますのでご注意ください。これはもう何年も前から気になってることなのですが。昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。私は以前、ファッション雑誌やビジネス誌の組版(MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う)の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。私は、見出しやタイトル画像における文字組みや文字詰めは、人物画の「瞳」と同じくらい大切なものだと思っています。書けた人物画やイラストで、瞳だけが適当に書かれていたらどんな印象を受けるでしょうか。Webデザインでは、テキストで書かれた本文は文字間の調整が難しいので致し方ないかなと思うのですが、見出し画像などの文字詰めは、ベタ組みよりもきちんと文字詰めをした方が絶対美しいと私は思います。少なくとも、Web制作に関わっている方は文字詰めの基礎について知っておいて損はないと思いますので、私が知っていることをここにまとめておきます。漢字はそのままベタ組み(文字間調整なし)でも良いと思うのですが、ひらがな、カタカナは原則として詰めましょう。文字詰めがよく分からない、あるいはそんなことにまで時間をかけられないほど忙しい場合は、Photoshopで文字レイヤーを選択し「選択した文字にツメを設定」の値を「20%」から「40%」にしただけでもだいぶまともにはなります。丁寧に詰めるには、「カット」の「ッ」の前後や「ト」の前など、特に空いている部分を手動で丁寧に詰めていきます。キーを連続で数回押して個別に詰めていきましょう。句読点などの記号も詰める前後に間隔が空いてしまう記号(、。・「」など)は適度に詰めましょう。括弧は一番細いフォントを選ぶこの話をすると、大抵「えっ!?」と言われますが、文字組みのきちんとした雑誌をよく見てください。大きな見出し文字は括弧が細くなっているはずです。括弧を細くしたほうがより上品に見えます。この例では括弧のみ最も細いフォントを選び、始まりの括弧のベースラインを少しだけ上に上げ、終わりの括弧のベースラインを少しだけ下げています。括弧を細いフォントにした場合にぼやける場合やそれほど細く見えない場合、Photoshopの鉛筆ツールを使って1pxの線にしてしまうのも手です。単位は小さな文字サイズにする例えば「100円」という文字列の場合、ベタに組むと「円」より「100」の方が小さく、バランスが悪くなってしまう場合があります。その場合、まず「100」の文字サイズとベースラインを他の文字に合わせ、さらに「円」の文字サイズを約2分の1から3分の2のサイズにすることで見やすくなります。あと、例えば「5つの秘密」という文字列の「5」を大きくするなど、強調したい数字の部分だけ大きくするという手もあります。この辺りは、スーパーなどのチラシが参考になります。助詞は一回り小さいフォントサイズにする「◯◯の」や「◯◯は」などの助詞や、それほど重要でない文字は一回り小さいフォントサイズにした方が、大切な部分がより強調されます。小さくした文字は、左揃えであれば下寄せに、中央揃えであれば真ん中揃えにする場合が多いようです。文字組みにこだわるのであれば、「カット」の「ッ」などの小さな文字をほんの少しだけ小さくします。見出し文字がきちんと処理されたサイトは、キャンペーンページやランディングページに多いです。今回は、ランディングページブックマークで見つけた文字組みの美しい見出し画像を紹介します。読点を詰め、「潤い」の「い」や「美白の」の「の」を少し小さいフォントサイズにしていることが分かります。読点の部分はちょっと詰め過ぎかもしれません。「キレイの」の「の」や「プロも」の「も」を少し小さいフォントサイズにしていることが分かります。「円」を小さくすることで価格を引き立たせています。「g」や「%」などの単位も小さくします。「1」と「位」が同じサイズだったら順位が引き立たないですよね。さんに教えていただきました。上の「ネットを巡る冒険」などのグローバルナビをクリックしてみてください。全ての記事の見出しが、かなり凝った文字組みになっていることが分かると思います。イラストとの組み合わせhttp://www.pixiv.net/member_illust.php?mode=medium&illust_id=13442693イラストと文字のうまい組み合わせがないか探していたところ見つけました。閲覧にはPixivのアカウントが必要です。深くデザインを学ぶために文字組みについてより深く知るのに良い本はないかと先日本屋に行ったところ、とても良い本を見つけました。デザインのルール、レイアウトのセオリー。この本は、文字組みだけにとどまらず、デザインやレイアウトのルールを基礎からしっかり学べる本です。グリッドシステム、ホワイトスペース、アクセントカラーなど、サンプルが豊富で、デザインやレイアウトの「仕組み」を分かりやすく解説されています。これからデザインをはじめたい方はもちろん、既に現役バリバリのデザイナーさんにも安心しておすすめできる良書だと思います。ちなみに、文字組みに関しては49、67、69ページあたりのサンプルが参考になると思います。インプレスダイレクトに、ページ見本が載っていました。終わりに今回は、分かりやすいように文字間を詰める方向のみの話をしましたが、もちろん案件やデザインの方向性によっては逆に文字間を開ける場合もあります。その場合にも、ぜひ意識していただきたいのが「文字と文字の間のホワイトスペース」です。見出しやタイトルの画像の文字間が無調整なのはもちろんNGだと思いますが、ただ文字間を詰めれば、あるいは開ければ良いというわけではなく、なるべく「文字と文字の間隔が均等に見えるように意識しながら手作業で調節することが大切」だと思っています。文字組み、文字詰めは、ほんの少し力をいれるだけでページの印象が大きく変わる部分です。この機会に見直して頂けると幸いです。いう本を見つけたのですが、ここに書かれている文字組みや文字詰めについてはもちろん、日本語フォントについてとても詳しく実例豊富にまとめてありました。文字詰めのサンプルも、ここに書かれているものより美しい実例がたくさん載っています。タイポグラフィを気にされる方は、ぜひ読まれることをお勧めいたします。Web制作の基礎から学べる「Webコーディングスクール」を渋谷で開催します!Web制作の基礎から学べる「Webコーディングスクール」は、これからWeb制作者になりたい社会人向の方に向けたスクールです。渋谷の教室でも、ご自宅での動画受講も可能です。これからWeb制作をはじめたい方向けに最新のHTMLとCSSの基礎からSass、JavaScriptの基礎まで、初歩から一通り学べるWeb制作スクールです。5月の土曜日に初回体験レッスン(1000円)も開催、動画受講も可能ですのでぜひお気軽にどうぞ。ページをご覧ください。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。outlook.comなどMicrosoftのメールサービスには届かないことが多いため、別のメールアドレスをおすすめします。Twitterでは、Web制作に関する最新情報をツイートしています。文字組みAboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷でWeb制作の基礎から学べる「Webコーディングスクール」の講師をしています。新着記事Web制作の基礎から学べる「Webコーディングスクール」を渋谷とオンラインで開催しますWeb制作の基礎から学べる「Webコーディングスクール」は、これからWeb制作者になりたい方向けにスマートフォン対応のHTML・CSSコーディング手法やSass・JavaScriptの基礎などを学べる社会人向けのスクールです。Bardは大規模言語モデルと呼ばれ、一般的には「チャットAI」や「会話AI」などと呼ばれます。...画像で分かる、新しいCSSこの記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。ブログや技術記事で使いやすい画像素材を配布します今メルマガ登録頂くと、毛糸風の画像素材を配布します。220枚以上あり、ブログや技術記事などで使いやすいと思います。Bardを試すなら、ぜひ試して頂きたいことが2つあります。それは回答の右上に表示されている[他の回答案を表示]をクリックして別の回答案を見ることと、数時間前の情報についてまとめて解説してもらうことです。デザインシステム入門!Web制作初心者が知るべき基本原則とFigma活用法デザインシステムの基本原則を学び、Figmaで効率的なWeb制作方法を初心者にもわかりやすく解説する記事です。2023年4月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。資料制作をお手伝いして頂いているemiさんによる寄稿記事です。