2022.10.12 WEBWebデザイン Illustratorのレイヤー整理術！レイヤーを美しくして作業効率を上げよう！ 前回の記事「Photoshopのレイヤー整理術！レイヤーを美しくして作業効率を上げよう！」では、Photoshopのレイヤーを整理することは重要であると解説しました。 Photoshopと同じAdobe製品のIllustratorにも、レイヤーの概念は存在します。 しかし、Photoshopとは少 [...]
2022.09.26 WEBWebデザイン CSSの新機能「カスケードレイヤー」を使ってもっと簡単にスタイルを管理しよう web制作の現場においてCSSでのスタイリングは欠かせないものですが、意図した装飾とならずに困った経験がある人は多いのではないでしょうか？ CSSのスタイリングを適用する際には、詳細度や記述の順番を考えてコーディングを行う必要がありますが、新しい機能として「カスケードレイヤー」が利用可能になりまし [...]
2022.09.21 WEBWebデザイン webサイトにおけるヘッダーの役割とは？分かりやすいヘッダーのポイントとNGな事例紹介 webサイトにおけるヘッダーとは、webサイトに訪れたユーザが一番初めに目にする箇所であり、基本的にwebサイトの上部に配置されています。 普段何気なく閲覧しているwebサイトですが、ヘッダーの構成によってユーザの閲覧のしやすさに大きく関わります。webサイトを新しく構築する場合やリニューアルする [...]
2022.09.09 WEBWebデザイン Photoshopのレイヤー整理術！レイヤーを美しくして作業効率を上げよう！ INDEXPhotoshopのレイヤーとはレイヤー整理のポイント3つ1. グループ化する2. レイヤー・グループにわかりやすい名前を付ける3. 無駄なレイヤーを作らないさいごに Photoshopのレイヤーとは PhotoshopやIllustratorなど、グラフィック系のソフトに存在するレイ [...]
2022.08.25 WEBWebデザイン 【canvas入門】HTMLとJavaScriptを使って図形を描いてみよう！（曲線編） 前回の記事「canvas要素とは？HTMLとJavaScriptを使って図形を描いてみよう！」では、canvas要素の設置方法と簡単な図形やパスの描き方をご紹介しました。 今回は前回触れられなかった曲線の書き方についてご紹介します。 INDEX2次ベジェ曲線を描く3次ベジェ曲線を描くさいごに 2 [...]
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の基本機能紹介【Part１】 前回は、無料デザイン作成ツール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ドロップダウンメニュー [...]
