2023.12.27 WEBWebデザイン 【新機能】Photoshopの生成AI機能「生成塗りつぶし・生成拡張」がすごすぎる!使い方をご紹介します。 写真を使ってデザインをしているとき、「もう少し背景のエリアを広げたい…」「被写体が近すぎる…もう少し引きの画が欲しい」などと思ったことはありませんか? 背景を無理やり引き延ばしたり、複製した写真をずらしたりしてみてもなにか不自然になってしまいますよね。 また、写真の中に映りこんだ物を消したいこと [...]
2023.12.26 WEBWebデザイン 【Figma】簡単にイラストが作成できる!絶対使うべきイラストプラグイン・モジュール8選 前回はFigmaのプラグインの導入方法についてご説明しました。 今回はFigmaのプラグインの中でもイラストに特化したプラグイン・モジュールを8個ご紹介します。 直感的でわかりやすい操作で時間をかけずにイラストを作れたり、オリジナルのイラストを追加できるので、イラストを描くのが少し苦手だなと思う方 [...]
2023.12.26 WEBWebデザイン パワーポイントでバナーを作るための実用的テクニック4選!パワポでもここまでできる! 先日、弊社ブログ記事「<ノンデザイナー・初心者向け>デザインツールがなくてもOK!パワポでバナーを作るために押さえておきたい6ステップ」が公開されました。 その際、「この表現は、パワーポイントではどうやっているの?」という声が寄せられたため、今回具体的なテクニックとしてご紹介したいと思います。 パ [...]
2023.12.06 WEBWebデザイン <ノンデザイナー・初心者向け>デザインツールがなくてもOK!パワポでバナーを作るために押さえておきたい6ステップ Webサイトを更新したりWeb広告を出稿したりするときに、たくさんのバナー画像の制作が必要になることがあります。 このバナー制作について、「自分で作りたいけど映えるバナーが上手く作れない」「制作会社にお願いしたが、イメージを上手く伝えられない」などとお困りの方はいらっしゃいませんか。 今回は、ノン [...]
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形式、 [...]