2023.08.23 WEBWebデザイン Canva Proって何ができるの？Canvaの有料プランで利用できる8つのおすすめ機能をご紹介！ Canvaは「おしゃれなデザインを誰でも簡単に作れる」無料のデザイン作成ツールです。 ダウンロード不要でブラウザ上で作業ができ、ドラッグ&ドロップの操作により、誰でも直感的に操作が可能です。 世界190ヵ国で利用されており、多くのユーザーに支持されています。 関連記事：ダウンロード不要！無 [...]
2023.08.16 WEBWebデザイン CSSのmask-imageプロパティとSVGを利用して簡単にアイコンの色を変えてみよう webデザインを作成するにあたってアイコンの利用は欠かせないものですが、CSSでコーディングを行う際に書き出し形式で悩んだ経験がある方もいるのではないでしょうか？ 大昔はアイコン画像の特性よりもブラウザの対応状況を優先しなければならないことも多々ありましたが、最近では利用用途に合わせてPNG形式、 [...]
2023.08.08 WEBWebデザイン AdobeXDユーザーがFigma（フィグマ）でワイヤーフレームを作ってみた【WF作成編】 前回はFigmaの概要、特徴をご紹介しました。 今回は実際にワイヤーフレーム（WF）を作成しながらFigmaの機能についてご説明します。 前回の記事Adobe XDユーザーがFigma（フィグマ）でWFを作ってみた【Figmaの概要～画面説明編】 フレーム（台紙）の配置 フレームとは、スマホや [...]
2023.07.25 WEBWebデザイン AdobeXDユーザーがFigma（フィグマ）でワイヤーフレームを作ってみた【Figmaの概要編】 現在、弊社ではWebサイトのワイヤーフレーム（WF）やデザインを作成するときにAdobe XDを使用しています。 しかし、そのAdobe XDの単体プランが2023年1月に突如販売終了しました。今のところ、Adobe Creative Cloud(Adobe CC)では、XDの利用が可能（また単体 [...]
2023.07.06 WEBWebデザイン 【Illustrator】一度作った装飾を保存しておける！「グラフィックスタイル」のご紹介 「グラフィックスタイル」とは？ Illustratorの「アピアランス」で指定した、「塗り」「線」「変形」や「効果」といったオブジェクトの装飾を保存しておくことで、いつでも他のオブジェクトに適用することができる機能です。 アピアランス機能について、詳しくは過去の記事でご紹介しています。 グラフィッ [...]
2023.06.29 WEBWebデザイン 【初心者向け】フレックスボックスとは？display:flexの使い方（基礎編） コーディングをしていて横並びレイアウトを実装する機会は多くあります。 以前であればfloatやtableを使ったりしていましたが、フレックスボックスの登場で、要素のレイアウトが格段にやりやすくなりました。今回はフレックスボックスの使い方について、分かりやすく解説していきます。 フレックスボックスの [...]
2023.06.20 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（パブリックメソッド編） jQueryプラグイン「bxSlider」に関する連載も4回目となりました。 前回までの記事 jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編） jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（実践編） jQueryプ [...]
2023.06.06 WEBWebデザイン 【Illustrator新機能】複雑な重なりを簡単に表現できる！「クロスと重なり」機能をご紹介します 2022年10月、Illustrator（ver27.0）に様々な新機能が追加されました。 その中の一つ、「クロスと重なり」機能がとても便利かつ楽しいのでご紹介します！ 「クロスと重なり」とはどんな機能？ 簡単にいうと、複数のオブジェクトのレイヤーを部分的に入れ替えることができる機能です。 （Il [...]
2023.05.09 WEBWebデザイン 【Canvaの使い方】デザイン確認や複数人での共同編集に便利！作成したデータをオンラインで共有する方法 Canvaは作成したデータをオンラインで簡単に共有・共同編集することができます。 作成したデータを他のユーザにオンラインで確認してもらいたい場合や、修正をしてもらいたい場合にとても便利です。 今回は、Canvaで作成したデータをオンラインで共有・共同編集する方法についてご紹介します。 Canvaに [...]
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には「塗りつぶし」ツールがない？ライブペイントツールでクローズパスの中を塗る方法ライブペイントを行う準備ライブペイントを使って塗りつぶす背景色を付けたい場合ライブペイントツールを解除する方法アピアランスパネルを表示・確認ライブペイントを分割・拡張グループ化を解除さ [...]
