MacライフハックSVGの最適な書き出しのためにやった方が良いこと、やらない方が良いことTweetSVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。03の内容を一部抜粋し、この記事用にリライトしたものです。やったほうがよいこと曲線のアンカーポイントを減らすブラシツールで描いた曲線などは、そのままではアンカーポイントがかなり多くなってしまうことがあります。アンカーポイントが多すぎるとファイルサイズも大きくなるので、Illustratorの機能を使用して簡単に減らしましょう。[選択]ツールなどでオブジェクトを選択し、[オブジェクト]メニューから[パス]→[単純化]を選択し、[単純化]ダイアログボックスで[曲線の精度]を下げます。[曲線の精度]を下げるほどファイルサイズを小さくすることができますが、曲線の形も元と異なる形になってしまうので気をつけましょう。パスを合体するたくさんの図形をグループ化している場合、複数の図形を選択してパスファインダーで[合体]をクリックして1つに合体してみましょう。ファイルサイズが小さくなる場合があります。多くの場合、option(Alt)キーを押しながら[合体]ボタンをクリックして[複合シェイプ]にしたほうがサイズが小さくなります。複合シェイプは再編集もしやすいためおすすめです。注意点として、パスファインダーで合体した場合、色はオブジェクト全体にしか指定できないので注意しましょう。ファイルサイズがムダに大きくなりすぎます。ファイルサイズが大きくなりすぎたり、ブラウザの表示が遅くなる場合があります。上述のパスの[単純化]をしてもファイルサイズが大きい場合は、SVG以外のファイル形式を検討しましょう。分割されたりラスタライズされる場合があります。ファイルサイズが大きくなったり、意図しない表示結果になる可能性があります。[ドロップシャドウ]や[ぼかし]のような効果をかける:表示されなかったり、効果がラスタライズされてSVGファイルの容量が大きくなることがあります。HTTP/2対応のサーバーを利用するたとえばWebアプリケーションなどでは細かいアイコンがたくさん必要になることがあります。そのような場合、サーバー側で「HTTP/2」を利用することをおすすめします。現在多くのブラウザはHTTP/2という新しいプロトコルに対応しています。HTTP/2ではたくさんの細かい画像があっても、読み込みの速度が遅くなりにくいです。モダンなレンタルサーバーであれば、多くはHTTP/2に対応しています。「ロリポップ!」や「さくらのレンタルサーバー」などはすでに対応しています。WebページのコンテンツがHTTP/2で配信されているか確認するWebページで、URLが「file」や「http」ではなく「https」から始まるもの(一般的にhttpの場合はHTTP/2でない場合が多い)をGoogleChromeで表示し、以下のようにします。command+option+i(WindowsはF12)キーを押して開発者ツールを表示します。[Network]タブをクリックし、command+R(F5)キーを押し、ファイルの一覧のようなものが表示されることを確認します。見出しの[Name]部分を右クリックして[Protocol]を選択すると、[Protocol]という列が表示されます。サイト内のHTML・CSS・画像などの[Protocol]の列が[h2]または[http/2]のように表示されているかを確認します。[http/1.1]と表示された場合はHTTP/2で配信されていません。スマートフォン時代のWebデザインスクールを渋谷で開講します2020年1月から、「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールの初回体験レッスンを渋谷で開講します。XDによるプロトタイピング、UI/UXなど新しい内容に対応しています。使ったことない方向け)です。初回体験レッスンは1,000円でご参加いただけます。XDによるプロトタイピング」「Instagram風のプロトタイプ制作」などを行います。「スマートフォン時代のWebデザインスクール」のページよりお気軽にご参加ください。PHP徹底入門講座・WordPressカスタマイズ講座を開きます「PHP徹底入門講座」は、「HTMLはわかるけどプログラミングは未経験」の方向けの日曜講座です。プログラミングを始めてみたい方は、まずはこちらへどうぞ。別途、「WordPressカスタマイズ講座」も開講します。管理画面から更新可能な中小企業サイト」制作までやります。スマートフォンやRetinaディスプレイに対応した新しい内容にリニューアルしました。渋谷にお越し頂くのが難しい場合、ご自宅で動画受講も可能です。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。WordPressPCのメールアドレス:Twitterでは、Web制作に関する最新情報をツイートしています。SVGAboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。「スマートフォン時代のWebデザインスクール」を東京・渋谷で平日夜に開催します「スマートフォン時代のWebデザインスクール」は、2020年2月から平日夜開催!初回体験レッスンも開催します。XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。2020年2月に「WordPressカスタマイズ講座」を開きます以下の方を対象として「WordPressカスタマイズ講座」を開きます。AppはAndroidのホーム画面にあるGoogle検索フォームのことである」と解説している記事が多いですが、どうも数が合わないと思って調べた結果、別の結論に至ったのでこの記事にまとめています。Edgeの正式版がリリースされました。いえ、この記事を読んでいる方の中には「まだ使ったことがない」という方もいらっしゃると思います。...「Webデザイナーはコーディングできるべきか」という議論に対する私の考え過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。「Web制作に役立つIllustrator入門講座」という無料講座を開催しますIllustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。フィルムカメラで撮影した写真を自分で現像・プリントしてみたフィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。2019年12月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。年末年始にWebデザインを学び直すための3つのステップこの記事は、以下のような方を対象にしています。