jdash 2000 site

DTP・Web制作・CSS・マーケティング・スマートフォン・印刷などの色んなものに四苦八苦しながら次なる営業展開を考える営業部所属の人のブログ



20160318-Illustratorの文字組みや詰めをWebで再現する-00


●Webでタイポグラフィはムダ?

はてなブックマークで話題のページでこんな記述がありました。(以下は原文ママ)

文字の間隔や改行位置がデバイスやユーザーの環境によって変わり同じ見た目を保証できない中、それをコントロールすることに注力すべきでしょうか?それを実装するエンジニアの工数は効果に見合ったものでしょうか?ユーザーはどんなメリットが得らるのでしょうか?何をもって美しいタイポグラフィとするのでしょうか?

Dear Web designer(Medium)

なるほど。

でも、作り手の苦労はクライアントからしたら結構どうでも良くないですか?


クライアントも、何の考えもなしに「紙とWebって同じようにできませんかねぇ」と言っているのではなく、(レイアウトやタイポグラフィ含め)印刷物で表現した世界観をWebでも同じように再現できれば、「紙のカタログは凝っているけど、ウェブはちょっと違うな…(メイリオフォント)」みたいな世界観の断絶を少しは和らげられるのでは、と思って発言されているのだと思います。

それをメディアが違うから…と頭ごなしにバッサリ切ってしまうのは、少し違うと思うのですよね。(もちろん考えなしに発言する人も多いでしょうが)


当然、コストの問題もあると思いますので、(改行位置はともかく)ユーザーの環境で同じように見えて、工数が少なければ良いのか!(ポジティブ思考)と考えて、Illustratorで制作したタイポグラフィ・文字組みを同じようにWebでも反映したいという要望に敢えてチャレンジしてみました。


記事の続きを読む




20160312-Photoshopでプレデターを出さずに雑に家を消す-00

Photoshopで「画像の中にある●●を消す」といった作業は画像編集でよくある作業だと思います。

togetterで「初心者のPhotoshop加工はプレデターが生まれる→「例えが秀逸」「あるある」と腹を痛めるTL」というまとめがありました。その最初のツイートがこれ。


おもしろい例えですね。スタンプツールで補正をすると、同じパターンが連続してしまうパターンです。

Photoshopで●●を消す作業の基本はスタンプツールですが、スタンプツールでチマチマ消す時間もない!という方には塗りつぶしの「コンテンツに応じる」がオススメです。

今回はこの機能を使って、雑な作業の割にサクッと建物を消す方法を紹介します。(Photoshop CC 2015を使用しています)



記事の続きを読む



20160217-日本語WebフォントをCSSでfont-family指定-00

割と間違っている人は多いのかも?


モリサワのWebフォントサービス「TypeSquare」を最近ようやく使い始めて、これは便利だと思い始めている今日この頃、みなさんいかがお過ごしでしょうか。



●目次



●ダメなCSSの書き方

さて、既にタイトル落ちしている気もしますが、TypeSquareでは、

font-family: "リュウミン R-KL","Ryumin Regular KL";
font-family: "A1明朝","A1 Mincho";
font-family: "中ゴシックBBB","Gothic Medium BBB";

と、font-familyに同じフォントの「日本語のフォント名」と「英字のフォント名」を並べて書いてはいけません。

記事の続きを読む



20160214-ネットの反応-Webフォントを滑らかにするCSS-01

Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)」は想像以上に反応があってビックリしました。


20160214-ネットの反応-Webフォントを滑らかにするCSS-02

はてなブックマークでも200ブックマーク超えってことで、こういうハックっぽいのは関心があるのだなと改めて感じました。


せっかく色々な意見を頂き、知らないこともあったので、自分が後で見返せるようにまとめておきます。(書ける時に随時更新)


記事の続きを読む



20160212-Webフォントを滑らかにするCSS-00

目次



●ブラウザーによってWebフォントの見え方が違う

今更ですが、日本語のWebフォントを会社のサイトで使い始めました。


元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

Webフォント - Wikipedia(Webフォント - Wikipedia)


意外と導入は簡単で、そんなに読み込みが重く(遅く)感じることは少ない気がします。

ただ、WebフォントはモリサワのTypeSquareを使っていますが、ブラウザーによって見え方が結構違うのだなと感じました。


Windowsのブラウザーでは、ざっくり言うと、

  • Internet Explorer 11:キレイ
  • Edge 13:そんなにキレイではない
  • Chrome 48:そんなにキレイではない
  • Firefox 44:そんなにキレイではない

と、こんな感じです。

※EgdeはEdgeHTMLのバージョン。ブラウザーのバージョンは25。


意外にもInternet Explorer 11はそのままでOKです(笑)。逆に純正のEdgeはまだ発展途上のためか、そんなにキレイではありません。

記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索