2023.11.28 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（カルーセルスライダー編） jQueryプラグイン「bxSlider」シリーズの5作目となります。 jQueryプラグイン「bxSlider」シリーズ jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編） jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズ [...]
2023.10.30 WEBWebデザイン Adobe XDユーザーがFigma（フィグマ）でワイヤーフレームを作ってみた【共有編】 前回はワイヤーフレーム（WF）を作成しながらFigmaの機能についてご説明しました。 今回は作成したWFを他の人と共有する方法についてご紹介いたします。 共有は、WFなどの作成したデザインデータを他者と共同編集ができたり、閲覧ができたりする機能です。また、共有時には欠かせない、コメント機能もありま [...]
2023.10.26 WEBWebデザイン 【CSS】displayプロパティの2値構文ってなに？新しい記述方法について解説！ displayはなじみのあるプロパティですが、最近、値の指定方法に新しく2値構文がサポートされました。 普段display: block;やdisplay: flex;など単一の値を指定して使っているかと思いますが、2つの値が入れられるようになってどんな変化があるのか。 今回はdisplayの新し [...]
2023.10.26 WEBWebデザイン 【Canva Pro】複数のSNSに予約投稿ができる！コンテンツプランナー機能のご紹介 これまで多くのCanvaの機能を紹介してきましたが、今回はCanvaの有料プラン「Canva Pro」で使用できる機能の1つである“コンテンツプランナー機能”をご紹介します。 コンテンツプランナー機能は、作成した画像やデザインをCanvaから複数のSNSへ、簡単に予約投稿が [...]
2023.10.25 WEBWebデザイン Illustratorの3D効果で、アイソメトリック図を作ってみよう！【回転体編】 前回の記事では、Illustratorの3D機能を使って立方体・直方体の作り方をご紹介しました。 アイソメトリック図のおさらい・立方体・直方体の作り方はこちらIllustratorの3D効果で、アイソメトリック図を作ってみよう！【立方体・直方体編】 今回は、「回転体」の作り方をご紹介しようと思い [...]
2023.10.25 WEBWebデザイン 【Figma】デザイン作業効率を上げるためのプラグイン簡単導入ガイド Figmaは標準でもデザインに必要な機能が備わっていますが、プラグインを使用すると、より効率的にデザインできるようになります。 今回は、Figmaのプラグインの導入方法について紹介します。 Figma（フィグマ）とは プラグインの導入方法を紹介する前にFigmaについて簡単に紹介します。 Figm [...]
2023.10.12 WEBWebデザイン 【Canva Pro】ワンクリックで背景を削除！背景リムーバ機能の使い方 これまで様々なCanvaの機能を紹介してきましたが、今回はCanvaの有料プラン「Canva Pro」の背景リムーバ機能をご紹介します。 背景リムーバ機能は、画像の背景を切り抜くことのできる機能です。 専用の画像編集ソフトを利用すると、操作が難しい場合もあります。 しかし、Canva Proの背景 [...]
2023.09.13 WEBWebデザイン Illustratorの3D効果で、アイソメトリック図を作ってみよう！【立方体・直方体編】 アイソメトリックとは アイソメトリックとは、立体の製法のひとつである「等角投影法」のことで、正式には「アイソメトリック・プロジェクション（Isometric Projection）」といいます。 物体を斜め上から見下ろした構図で、傾斜させた立体を、幅・奥行き・高さの3方向で作る角度がそれぞれ120 [...]
2023.09.11 WEBWebデザイン 【Canva Pro】簡単に画像の縦横比を変更できる！マジックリサイズ機能のご紹介 これまで様々なCanvaの機能を紹介してきましたが、今回はCanvaの有料プランCanva Proで使用できる、マジックリサイズ機能についてご紹介します。 関連記事：Canva Proって何ができるの？Canvaの有料プランで利用できる8つのおすすめ機能をご紹介！ マジックリサイズ機能は、ワンクリ [...]
2023.08.30 WEBWebデザイン 【初心者向け】フレックスボックスとは？display:flexの使い方（応用編） 前回フレックスボックスの基本的な構造と親要素（コンテナ）に指定するプロパティを紹介しました。 前回の記事：【初心者向け】フレックスボックスとは？display:flexの使い方（基礎編） 今回は子要素に指定するプロパティとその使い方について紹介します。 順序を指定する（order） 通常、子要素は [...]
2023.08.30 WEBWebデザイン デザイン初心者必見！効果的な色の選び方を学ぶ ~色がもたらす心理的効果と参考サイト~ 色はデザインの印象や雰囲気を変える重要な要素です。 デザインを作るときに「どの色を使えばいいんだろう・・・」と悩んだことがある人も多いのではないでしょうか。 この記事では、デザイン初心者の方々に向けて、色が与える印象（心理的効果）について解説し、実際に各色を特徴的に使用したwebサイトを紹介してい [...]
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を使ったりしていましたが、フレックスボックスの登場で、要素のレイアウトが格段にやりやすくなりました。今回はフレックスボックスの使い方について、分かりやすく解説していきます。 フレックスボックスの [...]
