Web制作関連の記事一覧




●印刷にもWebにもそれぞれのルール

私はメインの業務が印刷データの処理を行うDTPオペレーションからWeb制作になってから、日が長いですが(とはいえ、つい先日も出力トラブルのあるデータの解析などをやっていましたが)印刷系のルールと、Web系のルールって、似ているようでかなり違うことを実感しています。


ここでよく勘違いされて困ることが、印刷系とWeb系でデザイン・制作をする際に、同じアプリを使用するということです。

IllustratorとPhotoshop、これは印刷でもWebでも必ず使うアプリです。

だから、印刷でIllustrator・Photoshopを使っていると、Webデザイナーになるのも簡単なのでは?と思ってしまいがちです。

そこが落とし穴!


印刷は印刷なりのルールがありますよね。


  • 裁ち落としを付ける
  • 画像の解像度は350dpiで
  • カラーはCMYKで
  • フォントはアウトライン化で
  • リンク画像はユニークなファイル名に

  • 他にもたくさんあります。こうしたルールが分かっていないと、「うわっ、データは来たけど結局手直しが必要…」とか「どこをどう直せばここが直るんだ?」とか「思ったカラーにならないけどどうするの?」とか、最終的にできあがる成果物(=印刷物)の品質に悪い影響が出たり、作業効率が悪くて後工程の人が納期や作業の面で辛い思いをしたりします。

    だからルールを学んで、品質を向上させ、作業がスムーズに流れるようにするのです。


    WebにもWebなりのルールがあります。

    そんなルールを現場のプロから学べる書籍が『プロにまなぶ現場の制作ルール84』(北村崇・浅野桜著、エムディエヌコーポレーション発行)です。

    20160416-プロにまなぶ現場の制作ルール84-01

    黄色い目立つ帯にはこう書かれています。

    PhotoshopやIllustratorでのデータの正しい作り方、納品するときの指示方法など、Webデザイナーとして“やるべきこと”と“やってはいけないこと”をまとめた、Webデザインの新しいルールブック。

    ルールを知ることで、Webデザイナーがどのような仕事と品質を求められているのかが分かる本です。

    記事の続きを読む



    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はまだ発展途上のためか、そんなにキレイではありません。

    記事の続きを読む



    20160207-Facebookロゴ画像ファイルがダウンロードできない-00

    久しぶりにFacebookのロゴデータを公式サイトからダウンロードしようとしてハマったので、忘れないように書いておきます。



    ●Facebookのロゴデータは公式サイトからダウンロードできます

    FacebookのロゴデータはIllustrator(ai)・EPS・PNG・Photoshop(PSD)など、様々な形式で公式サイトが提供しています。


    ブランドリソースのページからFacebookのロゴデータをダウンロードするには、まずは「f」ロゴをクリックします。

    20160207-Facebookロゴ画像ファイルがダウンロードできない-01

    記事の続きを読む



    検索エンジンはユーザーにとって最適な情報を提供しようと改善を続けています。このため、企業にとっては必ずしも都合が良い検索結果にならないこともあるようです。


    ●目次



    ●謎の「ヤフー」という検索ワード

    録画してあったとあるテレビ番組を見ていたら小嶋屋さんのテレビCMを放送していました。

    年末ということで「年越しそば」の宣伝を行っているようです(現在、年越しそばの販売は終了しています)

    そのテレビCMの最後に表示されたとある部分に私は「えっ?」と思いました。

    それはここ。

    20151229-ヤフー・長岡小嶋屋-01

    「●●で検索」の●●の部分が「長岡小嶋屋」ではなく「ヤフー 長岡小嶋屋」になっていました。

    この「ヤフー」という検索ワードが追加されていることに、もの凄く違和感を感じました。

    「そば」などの関連した検索ワードではなく、なぜ「ヤフー」?

    記事の続きを読む



    ウェブ解析を頼まれたときに、いきなりGoogle Analyticsの画面を開いてしまう方(ウェブ担当者)に向けて、考えておきたいポイントを書いてみました。


    ●目次


    ●ウェブ担当者の悩みは「どこを改善すべきかわからないこと」

    ウェブ担当者として、より良いウェブサイトを作ろうとして、まず悩むことは「どこを改善したら良いかがわからない」ことではないでしょうか。

    改善のヒントとなるものとして、ウェブアクセスの解析ツールがあります。これはウェブサイトを閲覧した人がどのような行動をしたかを調べることができるので、ウェブ担当者であれば使っている人も多いでしょう。


    ●Google Analyticsを使っていればウェブの改善点がわかるのでは?

    ウェブアクセスの解析ツールとして有名どころはGoogle Analyticsです。
    無料で使用できるので、とりあえずウェブサイトに入れてある人も多いと思います。

    「これがあればウェブ解析も簡単なはず! ここにヒントがあるはずだ!」ということで、Google Analyticsのレポートページを開くと様々な指標が踊っています。

    この数字だらけのレポートページに戸惑ってしまうのではないでしょうか。

    20151220-ウェブ解析入門を読んで-01

    記事の続きを読む



    20150920-MovableTypeでブログ記事の最後から指定文字数を表示-01

    ブログ記事のタイトルやブログ記事の本文の「最初の20文字」を切り出すというのは、ブログ記事の一覧やパンくずリストなどで使用されるので、ご存じの方も多いと思います。



    ●先頭の▲▲文字を切り出す「trim_to」

    グローバルモディファイアの「trim_to」を使用します。

    <$mt:EntryTitle trim_to="20"$>
    <$mt:EntryTitle trim_to="20+…"$>
    

    上はブログ記事のタイトルの先頭20文字を表示、下は20文字を超える部分は「…」と追加して表示という意味です。


    ブログ記事の本文なら以下の通りになります。グローバルモディファイアの「remove_html="1"」で、ブログ記事の本文からHTML記述を削除した後、「strip_linefeeds="1"」で改行を削除してから指定した文字数を切り出します(そうしないとタグだけで終わってしまうこともある)。

    <$mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="20"$>
    <$mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="20+…"$>



    では、逆にブログ記事のタイトルやブログ記事の本文の「末尾から20文字」を切り出すのはどうしたらよいでしょうか?

    なお、グローバルモディファイアの「trim_to」にマイナスの値を入れても、末尾からの切り出しにはなりません。

    Movable Type 6.0.4 以降では、N に負の値を指定した場合は、文字列の末尾から N 文字取り除き、残った部分を取り出します。例えば、trim_to="-5" と指定すると、"サンプルの文章です" という文章は、"サンプル" と表示されます。

    trim_to -(グローバル・モディファイアリファレンス)


    記事の続きを読む




    今回はMovable Typeで制作するときに、すぐにできそうでできなくてハマる「ブログの最新記事を全ページに表示するためのテンプレート」について書いてみます。



    ●Movable Typeのコンテキストという概念を理解しよう

    「ブログの最新記事を全ページに表示するためのテンプレート」の前に理解しておかなければいけないことがあります。

    それはMovable Typeの「コンテキスト」という概念です。


    コンテキストは、文脈という意味で、Movable Typeでは、個別記事アーカイブのコンテキストやカテゴリーアーカイブのコンテキストなどがあります。

    コンテキストについては以下のページがとても分かりやすいのでMovable Typeを使うユーザーはぜひご一読を。

    コンテキストとは

    直訳すれば「文脈」です。ここではテンプレートにおける前後の文脈のことをそう呼びます。自然言語における人間の会話や文章にも前後の文脈というものが存在しますから、会話を例に挙げます。

     Aさん:今日は天気がいいですね。

    →「今日の天気」のコンテキスト


    MTのテンプレートでは現在のコンテキストに適合しないMTタグを使おうとすると、エラーが出るようになっています。

    20150912-Movable Typeでブログの最新記事を全ページに表示-01

    人間の会話において、文脈に沿っていない話題や発言をすると会話が成立しなくなるのと同じです。

    Aさん:今日は天気がいいですね。

    →「今日の天気」のコンテキスト

    Bさん:はい、僕はハンバーグが好きです。

    →コンテキストに沿っていないのでエラー

    MTのコンテキストについての考察と解説(Like@Lunatic)


    このコンテキストの中でテンプレートタグの挙動が変わってきます。

    例えば、インデックステンプレートのコンテキストであれば、最新のブログ記事10件の出力は、普通に最新のブログ記事10件の出力がされます。ですが、カテゴリーアーカイブのコンテキストであれば、最新のブログ記事10件の出力は、そのカテゴリー内の最新のブログ記事10件の出力となります。

    この挙動のために、ブログのサイドバーに「最新のブログ記事」を表示させようとすると、コンテキストによって異なった結果が表示されてしまいます。コンテキストの意味からすれば間違いではありません。


    ただ、この仕様が、カテゴリーアーカイブを含めた全ページに「普通に最新のブログ記事10件の出力」しようとすると、障害になってしまうわけです。


    ここまで理解できましたか?

    それではブログの最新記事を全ページに表示するためのテンプレートを作ってみましょう。

    記事の続きを読む



    ブログ著者

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

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

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

    ブログ著者について

    サイト内検索