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アニメーションのおさらいリン [...]
2020.07.21 WEBWebデザイン Adobe XDのコンポーネントを利用してホバーアクションをデザインする webデザインを作成する際についつい忘れがちになってしまうのがユーザーインタラクション時のデザイン（マウスホバーやボタンのクリックなど）です。 弊社ではPhotoshopでデザインをする際には別途レイヤーを作成したりPSDを分けて用意したりと仕様に応じて様々な工夫をしていますが、AdobeXD（以 [...]
2020.06.16 WEBWebデザイン CSSでアニメーションを作るには？CSSアニメーションの作り方（基礎編） 最近ではアニメーションを使用しているwebサイトが多くなりました。 要素の色や形を変化させたり、移動させたりすることで、動きのある華やかな印象を与え、より直感的に情報を伝えることが出来るアニメーション。 そんなアニメーションをCSSだけで表現する方法を、今回解説していきます。 INDEXCS [...]
2020.04.27 WEBWebデザイン 【Photoshop】レイヤーマスク、クリッピングマスクの違いを理解して作業効率をアップしよう！ Photoshopにはいくつかマスク機能があり、その中でも今回は「レイヤーマスク」と「クリッピングマスク」をご紹介しようと思います。 Photoshopのマスクとは、「画像の切り取り」ではなく「画像を隠す」機能です。 元の画像に手を加えず、上からマスクをかぶせているイメージです。 そのため、後か [...]
2020.04.17 WEBWebデザイン positionプロパティを身に着けよう！stickyの仕様と使い方を解説！ 前回の記事positionプロパティを身に着けよう！基本的な知識と使い方を解説！（基礎編）ではpositionプロパティにおける4つの値について解説しました。 今回はこれらの値全てと類似点を持つposition: sticky;に関して解説していきます。 INDEXposition: s [...]
2020.04.16 WEBWebデザイン Dreamweaver CCでSassを使ってCSSファイルをコンパイルする（CSSプリプロセッサー機能） 弊社ではHTMLやCSSのコーディングを行うスタッフの大半がDreamweaver CCを利用しています。コードスニペットやテンプレート機能、サイトの管理などweb制作に必要な機能が一通りそろっている高機能なエディタですが、Dreamweaver CCを利用してる理由の1つに「CSSプリプロセッサ [...]
2020.03.24 WEBWebデザイン 【Photoshop】画質を落とさずノイズを軽減できる「Camera Rawフィルター」の使い方 高感度で撮影した写真は、ザラザラとしたノイズが見えることがあります。 画質を落とさずノイズのない綺麗な画像を作るには、Photoshopの「Camera Rawフィルター」がオススメです。 どうしても使いたい画像のサイズが小さく、引き伸ばさなければいけないときであっても、ギザギザした質感を緩和す [...]
2020.03.18 WEBWebデザイン 公式テンプレートを使ってAdobe XDのプラグインを自作してみよう ～starter project導入編～ 弊社ではwebデザイン作成前のプロトタイプを構築する際にAdobeXD（以下XD）を利用する機会が増えてきました。 XDは軽量・シンプルで使い勝手の良いツールなのですが、機能が限定的で痒い所に手が届かないこともしばしば。。。 そのような時に「何か良いプラグインはないかな」とインターネット等で検 [...]
2020.02.17 WEBWebデザイン positionプロパティを身に着けよう！基本的な知識と使い方を解説！（基礎編） HTMLの要素は通常、記述しただけでは右もしくは下に配置されていきます。要素を自由に配置できるということはwebサイトのデザイン性の向上だけでなく、ユーザーの使いやすさにも大きく関わってきます。 今回はそんな要素の配置位置を指定するときに役に立つCSSの一つ、positionプロパティについて、 [...]
2020.01.23 WEBWebデザイン 【初心者向け】Photoshopのスマートオブジェクトって一体何？画像を劣化させずに拡大・縮小ができる便利な技 Photoshopを使っていると必ず目にする「スマートオブジェクト」。名前だけ聞くと何なのかわかりません。 ですがこのスマートオブジェクト、理解すると画像のクオリティはおろか、作業スピードもアップする素晴らしいものなのです！ 今回はこのスマートオブジェクトとは何なのか、そして便利な使い方につい [...]
2020.01.20 WEBWebデザイン AdobeXDのリピートグリッドを使ってコンテンツを一括で流し込む方法 前回、AdobeXDのリピートグリッドを利用したコンポーネントの作成方法を紹介しました。 前回の記事AdobeXDのリピートグリッドを使ってプロトタイプを効率よく作成しよう リピートグリッドを利用することでコンポーネントを繰り返すようなデザインを効果的に作成することができるようになりましたが、今 [...]
2020.01.17 WEBWebデザイン 「画像優位性効果」を理解してユーザーの記憶に残るwebサイトを作成しよう 皆さんは、webサイトを閲覧するときに、理解するのに時間がかかったり、見終わったあとに内容を忘れてしまって再度サイトを確認したりした経験はありませんか。 今回は、web担当初心者の方もすぐに実行しやすい方法で、人間の心理から見た記憶に残りやすく理解しやすいwebサイトを作成するコツをお伝えいた [...]
2019.12.17 WEBWebデザイン 擬似要素タグbeforeとafterを活用しよう！基礎知識と使い方を解説！ 前回紹介した擬似要素・擬似クラスの指定方法の中から、今回はbeforeとafterについて詳しく解説をしていきます。 基本的な知識から具体的な活用方法まで、丁寧に解説していきますので是非参考にしてください。 INDEX属性要素「before」「after」とはbeforeとafterの基本的 [...]
