現在は状況が異なる可能性がありますのでご注意ください。Webデザインの教科書」という書籍を書きました。この本は技術評論社から出版されているシリーズもので、私1人の単著ではなく、4人の著者による共著となっております。Japanに登壇する黒野さんと森さん、デザイナーの角田さんとなっております。角田さんはすぴかあやか(@spicagraph)というTwitterアカウントでよく漫画ツイートが話題になっているので、見たことがある方も多いのではないでしょうか。2018年7月6日この書籍の対象となる方この書籍は完全所初心者ではなく、PhotoshopやIllustratorをある程度使える方向けの本となっております。CCの新機能をキャッチアップできていない方」などに良いのではと思います。1から15までの章に分かれています。太字は私が執筆を担当した章です。Cloudライブラリへのパーツの登録と活用PhotoshopでのWebページ制作テクニックXDを利用したレイアウトをしようXDを利用したプロトタイプ作成を学ぼう各アプリで効率的にテキストをデザインするPhotoshopから画像を書き出そうIllustratorから画像を書き出そうXDからの画像書き出しとコーダーとのデータ共有PSD・AIファイルからCSSやテキストを抜き出そうほかのアプリとの連係について知ろうここでは、内容の一部を紹介します。XD、Sketchなどがそれぞれどのようなデザインや作業に向いているかについて解説しています。XDの書籍を執筆されている北村さんに描き下ろしていただきました。内容の一部を以下の記事で紹介しています。Photoshop、Illustrator、XD、Sketch...結局どれを使ってWebデザインすればいいの?Lesson03:Illustratorでアイコンやロゴマークなどのパーツを制作しようここでは再編集しやすさを意識してパーツを作成する方法、Web制作者向けの[効果]、[アピアランス]、新しい[ピクセルグリッドに整合]の解説のほか、SVGの最適な書き出しと配信設定について解説しています。YouTubeの再生ボタンのようなアイコンの制作方法や、たくさんのSVGを快適に配信するためのサーバー設定などについても解説しています。※スクリーンショットはMacですがキーボードショートカットはWindowsとMacを併記しており、Windowsの方もご活用いただけるようになっています。Lesson12:Illustratorから画像を書き出そうSVGとはWebブラウザーで表示できるベクターグラフィックスの一種で、Retinaディスプレイのような高密度ディスプレイでも美しく表示できるなどメリットも多いですが、JPEGやPNGとは異なる注意点があります。Illustratorから書き出したSVGはそのままではファイルサイズが大きすぎるため、ファイルサイズを縮小し、最適化したいとします。SVGを最適化する方法をGoogle検索すると「SVGOMGを使用すると良い」と出てきたので、書き出したSVGをSVGOMGで最適化したところ、IE11などの古いWebブラウザーで表示がおかしくなってしまった...というのは割とあることです。すれば良かったのか?ということをこの書籍に書いています。SVGに関する解説は、SVGの仕様に大変詳しい株式会社まぼろしの松田さんにチェックしていただいています。Lesson15:ほかのアプリとの連係について知ろうここは私が執筆した章ではありませんが、「SketchとAdobeアプリのデータの互換性」、「XDで作成したカンプをZeplinで読み込む」など、Adobe以外のアプリも利用されている方には興味ありそうなトピックがまとめられています。このブログでは今後私が執筆を担当した記事のうちいくつかを紹介したいと考えています。この書籍は、全国の書店やAmazonなどで10月5日発売開始予定です。書籍の内容に関するお問い合わせについて書籍の内容に関するご質問などは技術評論社のお問い合わせフォーム↓よりお願い致します。このブログのお問い合わせからは受け付けておりませんのでご注意ください。書籍内容に関するお問い合わせ|技術評論社スマートフォン時代のWebデザインスクールを渋谷で開講します2020年1月から、「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールの初回体験レッスンを渋谷で開講します。XDによるプロトタイピング、UI/UXなど新しい内容に対応しています。使ったことない方向け)です。初回体験レッスンは1,000円でご参加いただけます。XDによるプロトタイピング」「Instagram風のプロトタイプ制作」などを行います。「スマートフォン時代のWebデザインスクール」のページよりお気軽にご参加ください。入門」「WordPressカスタマイズ講座」などさまざまな講座を予定しております。ご興味ある方は、下記フォームにPCのメールアドレスをご登録いただければ、次回開講の際お知らせします。WordPressPCのメールアドレス:Twitterでは、Web制作に関する最新情報をツイートしています。効率アップAboutフリーランスのWebデザイナーです。東京の下北沢で、うさぎと一緒に暮らしています。渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。「スマートフォン時代のWebデザインスクール」を東京・渋谷で平日夜に開催します「スマートフォン時代のWebデザインスクール」は、2020年2月から平日夜開催!初回体験レッスンも開催します。XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。2020年2月に「WordPressカスタマイズ講座」を開きます以下の方を対象として「WordPressカスタマイズ講座」を開きます。・WordPressプラグインの使い方を知りたい方Photoshopの「覆い焼き」や「なげなわ」って何?という話Photoshopを初めて使う方にとって、効果がわかりにくいツールはたくさんあると思います。...2020年1月の、これだけは押さえておきたいWeb関連の動き「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。AppはAndroidのホーム画面にあるGoogle検索フォームのことである」と解説している記事が多いですが、どうも数が合わないと思って調べた結果、別の結論に至ったのでこの記事にまとめています。Edgeの正式版がリリースされました。いえ、この記事を読んでいる方の中には「まだ使ったことがない」という方もいらっしゃると思います。...「Webデザイナーはコーディングできるべきか」という議論に対する私の考え過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。「Web制作に役立つIllustrator入門講座」という無料講座を開催しますIllustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。フィルムカメラで撮影した写真を自分で現像・プリントしてみたフィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。