2021.06.04 WEBWebデザイン IllustratorデータをPhotoshopで開く! レイヤーを保持したままaiをpsdに変換する方法 Illustratorでの制作物にPhotoshopで効果を付けたいときや、 aiデータをpsdデータに変換する必要があるとき、ただIllustrator上でpsdデータを「開く」をしても、レイヤーは統合されてしまいます。 今回はIllustratorで作成したデータのレイヤーを保持しながら、Ph [...]
2021.05.24 WEBWebデザイン CSS変数(カスタムプロパティ)を利用してコーディングを効率化しよう(入門編) 2015年にW3Cから勧告されて以来、CSSで変数(CSSカスタムプロパティ)が使えるようになってしばらく経ちました。 CSS Custom Properties for Cascading Variables Module Level 1 一部のレガシーブラウザ(主にIE11)が対応していなかっ [...]
2021.04.27 WEBWebデザイン Webサイト上での行動を操られている!? ユーザー心理に付け込む「ダークパターン」とは みなさんは通販サイトや情報配信サイトなどで、「買うつもりのない商品を購入してしまった・・・」「気づかないうちにメルマガを購読していた・・・」「解約の仕方がわからない・・・」といった経験はありませんか? もしかしたらユーザーを騙し、行動を操る「ダークパターン」の被害にあったのかもしれません。 本記事 [...]
2021.04.16 WEBWebデザイン 【Sass実践編】CSSの管理が楽になる「ネスト」を使ってみよう!書き方と利点を解説! 前回の記事(Sassの利用環境を構築しよう!gulpを使ってCSSにコンパイルする手順を解説)では、SassをCSSにコンパイルする環境を構築しました。 今回はSassを使って効率的にCSSを記述していくうえで欠かせない機能、ネスト(入れ子)について解説していきます。 この機能を使うと記述をまとめ [...]
2021.03.03 WEBWebデザイン パスファインダーよりも手軽!Illustrator消しゴム・はさみ・ナイフツールの使い方 前回のブログで、パスファインダー機能を使って画像を分割したり、合体したりする方法をご紹介しました。 前回記事「オブジェクトを組み合わせて複雑な図形をつくる!Illustratorのパスファインダー機能をご紹介」 今回は、そんなパスファインダー機能を使わずとも図形を加工できる、消しゴムツール・は [...]
2021.02.17 WEBWebデザイン Sassの利用環境を構築しよう!gulpを使ってCSSにコンパイルする手順を解説 CSSをより効率的に記述する、Sass(サス)という言語ですが、Sass自体はブラウザで読み取ることができません。 今回はWindows10で、SassをCSSに変換(コンパイル)するための環境構築手順をご紹介します。 過去にDreamweaverでSassのコンパイルを取り扱った記事もありま [...]
2021.01.27 WEBWebデザイン 光って目立つ!Illustratorのアピアランス機能で「光る文字」を作ろう サイトのバナーやアイキャッチを作っていると、文字に光沢を持たせて重厚な感じを出したいときや、文字が光って浮かび上がるような表現をしたい、と思うことがあります。 以前、Illustratorのアピアランス機能を使って袋文字の作り方をご紹介しました。 YouTube動画のサムネイル作成に!Photos [...]
2021.01.21 WEBWebデザイン Adobe XDのプラグイン「Copy CSS to Clipboard」を使ってCSSコーディングを効率化 弊社ではwebデザインを作成する際にAdobe XD(以下XD)をメインに利用していますので、HTML・CSSコーディングを行う際にもXDを使うことになります。 XDで作成されたデザインカンプからコーディングに必要な情報を確認するにはプロパティインスペクタを利用することになりますが、手動、目視での [...]
2020.12.25 WEBWebデザイン オブジェクトを組み合わせて複雑な図形をつくる!Illustratorのパスファインダー機能をご紹介 今回は、Illustratorの機能の一つ「パスファインダー」機能についてご紹介します。 パスファインダーはオブジェクト同士の合体、分割、型抜きなどができ、知っておくと複雑な図形を簡単につくることができます。手作業でパスを使ってかたどることが難しい図形も、工夫すれば簡単に作ることができます。 I [...]
2020.12.16 WEBWebデザイン JavaScript不要!CSSだけでハンバーガーメニューを実装する方法 スマートフォンサイトでよく使われるメニューに三本線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSとJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 IND [...]
2020.11.30 WEBWebデザイン Illustratorのグラフツールを使えば、簡単にグラフを作成できます (応用編~複合グラフ・立体表現~) 前回のブログにて、Illustratorで棒グラフを作る方法をご紹介しました。 前回記事「Illustratorのグラフツールを使えば、簡単にグラフを作成できます(棒グラフ編)」 今回は少し複雑な棒・折れ線複合グラフと、立体的な円グラフの作り方をご紹介します。 INDEX棒・折れ線複合グ [...]
2020.10.26 WEBWebデザイン Illustratorでイラストやロゴをトレースし、ベクターデータに変換してみよう 画像や写真などのラスターデータ、はたまた手書きの文字などをトレースし、ベクターデータに変更したいと思ったことはありませんか? ベクターデータのメリットとして、サイズの変更をしてもデータのクオリティが変わらないことが挙げられます。そのため、名刺やパンフレット等の作成によく使用されています。 ラスタ [...]
2020.10.19 WEBWebデザイン 手軽なCSSアニメーション!transitionプロパティの使い方(基礎編) 前回までanimationプロパティによるCSSアニメーションについてご紹介しました。 animationプロパティは@keyframesを設定し、animationプロパティを設定して・・・と簡単なアニメーションを実装するには少し手間がかかります。 もっと手軽にCSSアニメーションを実装したい [...]
2020.10.02 WEBWebデザイン Illustratorのグラフツールを使えば、簡単にグラフを作成できます(棒グラフ編) 先日、グラフの画像データを作成する機会がありました。 ExcelやPowerPointで作成してもよかったのですが、もう少しデザイン性をもたせたかったので、Illustratorで作成することにしました。 Excelと同じように表に数値を入れるだけで作成でき、Illustratorの機能を用い [...]
2020.09.26 WEBWebデザイン ScrollTriggerを利用してwebサイトスクロール時にアニメーションを追加する(導入編) お客様のwebサイト制作を手伝わせていただくにあたり、スクロールに合わせてアニメーションを追加したいというご要望をいただくことが多くなりました。アニメーション自体はCSSの進歩により比較的簡単に実装できるようになりましたが、「スクロールに合わせて」という要件にはJavaScriptを併用する必 [...]
2020.08.28 WEBWebデザイン YouTube動画のサムネイル作成に!PhotoshopとIllustratorで袋文字を作ってみました 写真の上に文字を配置するとき、文字が背景と同化して見づらくなってしまったことはありませんか?こんな時、袋文字が役に立ちます。 袋文字とは、文字を別の色で縁取りしたものを指します。素の文字よりもインパクトが出て、さらに可読性が増すため、YouTubeのサムネイルなどにもよく使われます。 今回はそん [...]
2020.08.07 WEBWebデザイン CSSアニメーションを使ったリンクボタンを作ってみよう!(実践編) 前回の記事(基礎編)ではCSSアニメーションの概要やanimationプロパティの種類など、基本的な情報をまとめました。 今回は実際にアニメーション表現のあるリンクボタンを作りながら、CSSアニメーションの使い方とその効果を解説していきます。 INDEXCSSアニメーションのおさらいリン [...]