2022.03.03 WEBWebデザイン ダウンロード不要!無料で画像編集やバナー作成が簡単にできるCanva(キャンバ)とは? ブログで使用するアイキャッチ画像、簡単なバナーなどを自分でデザインしてみたいと思う方は多いと思います。 しかし、本格的な画像編集ソフトを導入しようとすると「費用が掛かる」「操作方法が難しい」「パソコンのスペックが足りず思うように動かない」等の壁にぶつかり、思うようにできない方も多いのではないでしょ [...]
2022.02.22 WEBWebデザイン 【jQuery】スクロールすると出てきてフッター直前で止まるフローティングボタンの実装 webサイトを作成しているとフローティングボタンを設置することがよくあります。 フローティングボタンとは、ページの先頭へ戻るボタンやお問い合わせボタンなど、画面の右下などに表示され、スクロールしてもその位置で追従してくるボタンのことを言います。 今回はjQueryを使って、フローティングボタンの挙 [...]
2022.01.31 WEBWebデザイン 【Photoshop】ブラシ機能の基本的な使い方から活用方法まで Photoshopのブラシは、サイズやエッジの柔らかさ、デザインを変えて画面内を自由にペイントできるほか、選択範囲を調整するなどペイント以外の用途でも役立ちます。 今回はブラシ機能の基本から活用方法までをご紹介します。 ※説明には、Adobe Photoshop CC2021(Windows10版 [...]
2022.01.20 WEBWebデザイン WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法 IE(Internet Explorer)11がサポート対象外になり画像の圧縮形式にWebPを利用する機会が増えました。 WebPについては当ブログの記事でも紹介していますのでそちらをご覧ください。 当ブログの「WebP」に関する記事 次世代画像フォーマット「WebP」に変換して、webサイト [...]
2021.12.27 WEBWebデザイン Photoshopのアクション機能とバッチ機能を活用して、画像処理を自動化(一括処理)しよう! Photoshopにて、画像のリサイズやトリミングなど、簡単な作業を繰り返していると、「もっと効率よく画像を処理したい」と思うことがあります。 そんな時には、Photoshopの「アクション機能」と「バッチ機能」が便利です。 それぞれを簡単に説明すると、 アクション機能…Photoshop上での連 [...]
2021.12.27 WEBWebデザイン インクルーシブデザインとは?インクルーシブデザインを理解して、あらゆるユーザーを考慮したWebサイトを作ろう インクルーシブデザインという言葉をご存知でしょうか。 多様性が求められるこの時代では、このインクルーシブデザインをデザインのプロセスで取り入れていくことが重要です。 今回は、そんなインクルーシブデザインについて、簡単にご紹介いたします。 INDEXインクルーシブデザインとはユニバーサルデザインと [...]
2021.12.15 WEBWebデザイン AdobeXDのスタック機能とパディング機能を使って効率的に余白を管理しよう webデザインの作成において、配置した要素が未確定だったり配置した後に内容の変更をする場面があります。 そのたびに変更した要素に対して余白を調整するのは効率的ではありません。 今回は、要素の内容が変更されても余白を保ったままデザインできる、AdobeXDのスタック機能とパディング機能を紹介します。 [...]
2021.11.30 WEBWebデザイン 印刷すると⾊が変わる︖RGBとCMYKを理解して、正しくIllustratorの設定を使い分けよう(応用編) 以前の記事「印刷すると⾊が変わる︖RGBとCMYKを理解して、正しくIllustratorの設定を使い分けよう(基礎編)」では、RGBとCMYKの違いやillustratorでの設定の注意点も踏まえて簡単にご紹介いたしました。 今回は、RGBとCMYKの表現方法を数値的に説明いたします。 IND [...]
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 [...]