2021.10.27 WEBWebデザイン WebP形式の画像をPhotoshopで読み込み・編集・書き出しができる！プラグイン「WebPShop」の導入方法をご紹介 WebPとはJPEGやPNG・GIFなど代表的な3種類の形式と比べて画像の圧縮率が高く、アルファチャンネル（透過）にも対応している汎用性が高い画像フォーマットです。 iOS 14/iPadOS 14およびmacOS 11のSafari14で、WebP形式画像が正式にサポートされ、WebPを導入する [...]
2021.10.19 WEBWebデザイン 【Sass実践編】「ミックスイン」を使って効率的にスタイルを管理しよう！使い方と利点を紹介！ CSSを書いていると、同じ形でも色が違うだけのボタンや、線の太さが違うだけの見出しなど、似たようなスタイルを一括で管理したいと思ったり、 ブレイクポイントを記述する際に、いちいち「@media screen～」と書くのが面倒だと思った経験などあるかと思います。 Sassではそんな使いまわしたいスタ [...]
2021.10.08 WEBWebデザイン CSSのfilterプロパティを利用して簡単なフィルターを画像に追加しよう CSS3から新たに filter というプロパティが利用可能になりました。 今までは一部のレガシーブラウザ（主にIE11）でポリフィルが必要となるため導入を控えてきましたが、IE11をサポート対象外にする案件が増えてきましたので今後のために基本的な使い方をまとめておきたいと [...]
2021.09.29 WEBWebデザイン PowerPointがなくても大丈夫！ Googleスライドを使ってバナーや画像ボタンを作る方法 前回の記事「画像編集ソフト要らず！パワーポイントを使って簡単にバナーや画像ボタンを作る方法」 では、PowerPointを使った基本的なバナーの作り方をご紹介しました。 前回の記事を執筆した後、「そもそもMicrosoft Officeをインストールしていない人はどうしたらいいのだろう」と思い調べ [...]
2021.09.22 WEBWebデザイン CSS mix-blend-modeを利用してブレンドモードをキレイに再現しよう コーディングを行うにあたってPSDやAIで作られたデザインをチェックしている際に、レイヤーに「乗算」や「スクリーン」が使われていて悩んだ経験がある方も多いのではないでしょうか。 今までCSSでコーディングするときには複数のレイヤーをまとめて画像で書き出したりとちょっとひと手間かける必要がありました [...]
2021.08.31 WEBWebデザイン 画像編集ソフト要らず！パワーポイントを使って簡単にバナーや画像ボタンを作る方法 ホームページに掲載したり、web広告に利用したりと、なにかと必要な機会の多いバナー。 ホームページの更新でちょっとしたバナーの文言変更や写真の差し替えがしたいとき、 制作会社に頼むのは面倒だし、費用がかさむ… でもIllustratorやPhotoshopなどの画像編集ソフトは持っていないし、持 [...]
2021.08.16 WEBWebデザイン 【Sass実践編】Sassの条件分岐と繰り返し処理とは？Sassでの制御構文の書き方を紹介！ 今回はSassの制御構文について解説していきます。 制御構文が使えるようになると、条件によってスタイルを振り分けたり、繰り返し指定するスタイルの記述を短縮できたりするので、理解しておきたい機能です。 INDEX制御構文とは@ifを使った条件分岐@forを使った繰り返し処理@whileを使った繰り [...]
2021.08.03 WEBWebデザイン SVGってなに？PhotoshopやIllustratorでSVG画像を書き出す方法を解説します。 JPGやGIFといった画像拡張子のほかに、「SVG」という拡張子を目にしたことがあると思います。 JPGやGIF等の「ビットマップデータ」とは違い、SVGは「ベクターデータ」に分類されます。ベクターデータには拡大しても画質が落ちないという特徴があり、昨今のwebサイトでは、レスポンシブやRetin [...]
2021.07.19 WEBWebデザイン CSS Grid Layoutを利用して2次元レイアウトを自由自在に操作する ひと昔前はCSSコーディングで段組みのようなレイアウトを実現するにはfloatやtable等を利用するのが主流でした。 CSS3が普及してからはFlexbox Layout（以下Flex Layout）を多用してきましたが、同じくCSS3から利用可能となったCSS Grid Layout（以下Gr [...]
2021.06.24 WEBWebデザイン 印刷すると⾊が変わる︖RGBとCMYKを理解して、正しくIllustratorの設定を使い分けよう（基礎編） 皆さんは、「印刷してみたら思っていた色より暗くなってしまった」「写真データを書き出したら色が変わってしまった」などの経験はございませんか。それらは恐らく、RGBとCMYKの違いによってもたらされるものが原因です。 今回は、RGBとCMYKそれぞれの特長と、Illustratorを使用する際に使い分 [...]
2021.06.17 WEBWebデザイン 【Sass実践編】Sassを使いこなす第一歩、「変数」の書き方と使い方！ 今回はSassの機能の一つ、「変数」ついて解説していきます。変数の記述はSassをより便利に使う上で確実に覚えておきたい機能なので、これを機にしっかり理解していきましょう。 Sassのコンパイルに関しては「Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説」を参照にし [...]
2021.06.04 WEBWebデザイン IllustratorデータをPhotoshopで開く！ レイヤーを保持したままaiをpsdに変換する方法 Illustratorでの制作物にPhotoshopで効果を付けたいときや、 aiデータをpsdデータに変換する必要があるとき、ただIllustrator上でpsdデータを「開く」をしても、レイヤーは統合されてしまいます。 今回はIllustratorで作成したデータのレイヤーを保持しながら、Ph [...]
2021.05.24 WEBWebデザイン CSS変数（カスタムプロパティ）を利用してコーディングを効率化しよう（入門編） 2015年にW3Cから勧告されて以来、CSSで変数（CSSカスタムプロパティ）が使えるようになってしばらく経ちました。 CSS Custom Properties for Cascading Variables Module Level 1 一部のレガシーブラウザ（主にIE11）が対応していなかっ [...]
2021.04.27 WEBWebデザイン Webサイト上での行動を操られている！? ユーザー心理に付け込む「ダークパターン」とは みなさんは通販サイトや情報配信サイトなどで、「買うつもりのない商品を購入してしまった・・・」「気づかないうちにメルマガを購読していた・・・」「解約の仕方がわからない・・・」といった経験はありませんか? もしかしたらユーザーを騙し、行動を操る「ダークパターン」の被害にあったのかもしれません。 本記事 [...]
2021.04.16 WEBWebデザイン 【Sass実践編】CSSの管理が楽になる「ネスト」を使ってみよう！書き方と利点を解説！ 前回の記事（Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説）では、SassをCSSにコンパイルする環境を構築しました。 今回はSassを使って効率的にCSSを記述していくうえで欠かせない機能、ネスト（入れ子）について解説していきます。 この機能を使うと記述をまとめ [...]
2021.03.03 WEBWebデザイン パスファインダーよりも手軽！Illustrator消しゴム・はさみ・ナイフツールの使い方 前回のブログで、パスファインダー機能を使って画像を分割したり、合体したりする方法をご紹介しました。 前回記事「オブジェクトを組み合わせて複雑な図形をつくる！Illustratorのパスファインダー機能をご紹介」 今回は、そんなパスファインダー機能を使わずとも図形を加工できる、消しゴムツール・は [...]
2021.02.17 WEBWebデザイン Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説 CSSをより効率的に記述する、Sass（サス）という言語ですが、Sass自体はブラウザで読み取ることができません。 今回はWindows10で、SassをCSSに変換（コンパイル）するための環境構築手順をご紹介します。 過去にDreamweaverでSassのコンパイルを取り扱った記事もありま [...]
