2023.04.26 WEBWebデザイン 【jQuery】スクロール位置に応じて複数のコンテンツで背景を変化させる方法 最近、スクロール位置に応じてコンテンツごとに背景を変更する提案があり、実装してみたところ多くの学びがありました。 ユーザのアクションによって背景が変化するので、大きなユーザ体験を与えられるとともに、コンテンツに関してもとてもドラマチックに見せることが出来ます。 そこで今回はjQueryを使った、ス [...]
2023.04.21 WEBWebデザイン 【Canvaの使い方】簡単にキレイなグラフを作成できる!グラフ作成機能のご紹介 下記のようなグラフを作成する場合、主にExcelやPowerPointといったアプリケーションを使用することが多いと思いますが、実はCanvaでも簡単にキレイなグラフを作成できます。 また、ExcelやPowerPointはパソコンにインストールする必要がありますが、Canvaはその必要がありませ [...]
2023.04.13 WEBWebデザイン 【流行デザイン】XD・Photoshopでグラスモーフィズムデザインを作ってみよう! INDEXグラスモーフィズムとは?XDでグラスモーフィズムを作ってみるSTEP1:背景画像を用意するSTEP2:すりガラスになるオブジェクトを作成するSTEP3:オブジェクトにアピアランスと効果を設定するSTEP4:完成!Photoshopでグラスモーフィズムを作ってみるSTEP1:背景デザイン [...]
2023.04.07 WEBWebデザイン 【Canvaの使い方】簡単にキレイな表を作成できる!Canvaの表作成機能のご紹介 下記のような表を作成する場合、主にExcelやPowerPointといったアプリケーションを使用することが多いと思いますが、実はCanvaでも簡単にキレイな表を作成できます。 また、ExcelやPowerPointは、パソコンにアプリケーションをインストールする必要がありますが、Canvaはその必 [...]
2023.03.29 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ(コールバック関数編) 過去2回に渡りjQueryプラグイン「bxSlider」の基本的な使い方についてご紹介してきました。 jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ(導入編) jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ(実践編) 今 [...]
2023.03.17 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ(実践編) 前回の記事、「jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ(導入編)」ではCDNを利用してbxSliderを導入する方法をご紹介しました。 今回は引き続き、bxSliderの基本的な使い方についてご紹介していきたいと思います。 INDEXjQueryプラグイ [...]
2023.02.27 WEBWebデザイン 【canvas入門】canvas要素にテキストを描画しよう!スタイル設定方法も紹介! canvas要素について、これまでは図形の描画を主に取り扱ってきましたが、今回はテキストを描画する方法をご紹介いたします。 また、描画するテキストのフォントサイズやベースラインなどスタイルの設定方法についてもご紹介いたします。 canvas要素の基本的な使い方については前回までの記事をご確認くださ [...]
2023.02.06 WEBWebデザイン Illustratorでも塗りつぶしができる! ライブペイントツールの使い方 INDEXIllustratorには「塗りつぶし」ツールがない?ライブペイントツールでクローズパスの中を塗る方法ライブペイントを行う準備ライブペイントを使って塗りつぶす背景色を付けたい場合ライブペイントツールを解除する方法アピアランスパネルを表示・確認ライブペイントを分割・拡張グループ化を解除さ [...]
2023.01.25 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ(導入編) web制作を行うにあたってクライアント様からよくいただく要望の1つに、「画像を何枚か切り換えたい(スライドさせたい)」というものがあります。 「CSSだけで」、「JavaScriptも使って」等々、やり方は色々ありますが、一から仕様を考えて実装を行うのはなかなか手間がかかるもの。ご予算や納期を考え [...]
2022.12.22 WEBWebデザイン 【canvas入門】canvas要素にグラデーションのスタイルを設定しよう! 前回の記事「canvas要素の線や塗りのスタイルを変更しよう!」でcanvas要素において色の変更方法をご紹介しました。 canvas要素ではCSS等と同じく単色の色だけではなくグラデーションも設定することが可能です。今回はグラデーションの設定方法について解説していきます。 INDEXグラデーシ [...]
2022.11.28 WEBWebデザイン Illustratorで「矢印」を作る! Photoshopへのコピペ方法も解説します。 図解などを作成する際によく使われる矢印。 今回は Illustratorで様々な形の矢印の作り方をご紹介します。 INDEXシンプルな直線矢印<応用>曲線の矢印ペンツールで曲線を描く⇒矢印化楕円ツールで円を描き、ダイレクト選択ツールで下半分を選択し、パスを削除⇒矢印化直線の矢印を「オブジェクト」 [...]
2022.11.07 WEBWebデザイン デザインでよく見る“あしらい”をIllustratorで簡単に作ってみよう デザインにおいての「あしらい」とは、「装飾」や「ディテール(細部)」のことを意味します。 例えば、見出しのフレームや帯、下線などの飾りや、イラストや文字の加工、背景のテクスチャー等もあしらいに含まれます。絶対に必要なものではないですが、あしらいを施すことによってサイト全体の雰囲気を演出することがで [...]
2022.11.07 WEBWebデザイン ブラウザ上でガイドを表示できる!ピクセル単位でのサイズ計測ができる!Chrome拡張機能「Grid Ruler」 様々なwebデザインの参考サイトを確認する際、「このサイズをまねしたいけど何ピクセルなのだろう」「このフォントサイズはいくつなのだろう」と思うことはありませんか? webサイトデザインは基本的にサイズの単位が「ピクセル」であり、一般人にとっては目視ではかるのはなかなか困難です。 また、webサイト [...]
2022.10.31 WEBWebデザイン 【canvas入門】canvas要素の線や塗りのスタイルを変更しよう! 前々回(canvas要素とは?HTMLとJavaScriptを使って図形を描いてみよう!)と前回(【canvas入門】HTMLとJavaScriptを使って図形を描いてみよう!(曲線編))の記事でcanvas要素において図形やパス、曲線などの描き方をご紹介しました。 今回はその図形や線に対して、色 [...]
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サイトを新しく構築する場合やリニューアルする [...]