2022.07.20 WEBWebデザイン Photoshopのトーンカーブの役割と効果を理解して、画像補正をマスターしよう!【色補正編】 Adobe Photoshopを使って画像の補正を行う際、使用する頻度が高い「トーンカーブ」。 前回は明るさの補正の仕方をご紹介しました。 前回の記事はこちらPhotoshopのトーンカーブの役割と効果を理解して、画像補正をマスターしよう!【基本編】 今回は、撮影した写真が特定の色味に偏ってしま [...]
2022.07.15 WEBWebデザイン Canvaを使ってQRコードを作成して、QRコード付きのチラシを作成してみよう! QRコードとは、スマホのカメラやアプリを使って読みとることで、簡単な文字列やwebサイトを表示させることのできる二次元コードの事です。 元々は、自動車工場で部品管理の為に開発されたQRコードですが、近年では電子決済に利用されたり、名刺やチラシに添付されたりと、かなり身近なものになっています。 今回 [...]
2022.07.12 WEBWebデザイン VSCodeにEditorConfigプラグインを導入してコードフォーマットを統一する HTMLのインデントはスペース2つ、CSSのインデントはスペース4つ、改行コードはLF派の著者です。 インデントにスペースを使うかタブを使うか、スペースなら2つ分か4つ分か。所説あるので深く言及はしませんが、コーディングを担当する人によって好みがわかれることが多い問題?だと思います。 1人で完結す [...]
2022.06.30 WEBWebデザイン Photoshopのトーンカーブの役割と効果を理解して、画像補正をマスターしよう!【基本編】 Adobe Photoshopを使って画像の色調補正を行う際、使用する頻度が高い「トーンカーブ」。 対角にある2つの点を繋いだ線をドラック&ドロップでカーブさせることで、画像の明るさやコントラストが変化します。 皆さんはトーンカーブがなぜこのような形状をしているのか、考えたことはあるでしょうか。 [...]
2022.06.16 WEBWebデザイン canvas要素とは?HTMLとJavaScriptを使って図形を描いてみよう! HTMLで図形を表現する場合img要素が一般的ですが、HTML5からcanvas要素で描画処理を行うことが可能となりました。 しかしJavaScriptを使うためハードルが高いと感じている方も多いのではないでしょうか。 今回はcanvas要素の設置の仕方と簡単な図形の描き方についてご紹介します。 [...]
2022.05.31 WEBWebデザイン Photoshopでくもり空を青くしよう!~空の置き換え機能を使わない方法も紹介します~ Adobe Photoshop CC 2021のアップデートにより搭載された「空を置き換え」機能。 Adobe Sensei という人工知能が画像のマスクと合成を自動で行ってくれるという、画期的な機能です。 今回はそんな空の置き換え機能の使い方を、解説していきます。 また、「空を置き換え」機能のな [...]
2022.05.18 WEBWebデザイン 無料の高品質デザイン作成ツールCanvaの基本機能紹介【Part1】 前回は、無料デザイン作成ツールCanvaの操作方法について解説しました。 今回は、前回紹介しきれなかった基本操作についてご紹介します。 アカウントの作成方法、Canvaの特長などを知りたい方は下記の記事からご確認ください。 ダウンロード不要!無料で画像編集やバナー作成が簡単にできるCanva( [...]
2022.05.13 WEBWebデザイン gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する(オプション・プラグイン編) 以前の記事「Sassの利用環境を構築しよう!gulpを使ってCSSにコンパイルする手順を解説」では、「gulp-imagemin」パッケージのv8、v7系をそれぞれインストールして実行するところまで紹介しました。 画像の圧縮は問題なく行えましたが、gulp-imageminのデフォルトの設定では圧 [...]
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を使って、フローティングボタンの挙 [...]