2022.05.07 WEBWebデザイン Illustratorのブレンドツールを使って、飛び出す文字を作ってみよう！ Illustratorのブレンドツールとは、 2つのオブジェクト間に形状を作成して、均等に分布させることができます。2つのオープンパスをブレンドしてオブジェクト間を滑らかに変化させたり、カラーのブレンドとオブジェクトを組み合わせて、オブジェクトの形状内にカラーの変化を付けたりすることもできます。A [...]
2022.04.28 WEBWebデザイン 【初心者向け】Canvaを使ってバナーやチラシを作成してみよう！（テキスト/図形/画像の配置と編集方法） 前回の記事「サイズの指定方法・テンプレートの探し方」に続き、今回は、Canvaの基本的も下記の操作方法についてわかりやすく解説いたします。 INDEXテキストの配置と編集方法テキストの配置テキストの編集図形の配置と編集方法図形の配置図形の拡大縮小図形の色を変更画像素材のアップロード方法画像の編集 [...]
2022.04.28 WEBWebデザイン 【初心者向け】Canvaを使ってバナーやチラシを作成してみよう！（サイズの指定方法・テンプレートの探し方） 前回の記事「ダウンロード不要！無料で画像編集やバナー作成が簡単にできるCanva（キャンバ）とは？」では、無料デザイン作成ツール、Canvaの特長と簡単な操作方法について解説しました。 今回は、Canvaの基本的な下記の操作方法についてわかりやすく解説いたします。 INDEX制作物のデザインサイ [...]
2022.04.21 WEBWebデザイン JavaScript不要！CSSだけで出来るドロップダウンメニューの実装方法 webサイトを作成しているとドロップダウンメニューの設置をすることがよくあります。 メニューがグローバルナビゲーションに収まりきらない場合や、階層が多いサイトなどで重宝する形式です。 今回はこのドロップダウンメニューをCSSのみで実装する方法をご紹介いたします。 INDEXドロップダウンメニュー [...]
2022.03.30 WEBWebデザイン Web制作に役立てよう！ フォントに関する便利なオンラインツールをまとめました。 Webサイトや印刷物などのデザインを作る上で「フォント」は欠かせません。 私はよく、電車の広告や街中の看板などに使われているフォントを観察しています。観察していると、世の中には数多くの種類のフォントが存在しているなと感動します。 デザインする上で、フォントの影響力は多大です。フォントの種類を変える [...]
2022.03.22 WEBWebデザイン これを知れば色使いの迷いを解決する！デザインのクオリティーが上がる配色法 デザインを作る時に大きな要素の中でひとつが「色」です。色使いによってデザインのイメージや印象、雰囲気が左右されます。配色によっては、強い印象を与えることで相手の記憶に残したり、優しい雰囲気で癒しを与えたりすることができます。今回は、デザインに大きな影響を与える色の選び方について解説していきたいと思 [...]
2022.03.16 WEBWebデザイン gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（インストール編） 先日、「WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法」では、gulpを使ってWebP形式に画像を変換する方法をご紹介しました。 IE（Internet Explorer）11がサポート対象外になり画像の圧縮形式にWebPを利用する機会が増えたとお伝えしました [...]
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ではそんな使いまわしたいスタ [...]
