松下 絵梨

大阪のWeb/UIデザイナー・講師。CSS Nite in Osaka 実行委員長・A…

松下 絵梨

大阪のWeb/UIデザイナー・講師。CSS Nite in Osaka 実行委員長・Adobe XD ユーザーグループ大阪 主宰。『Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル』（翔泳社）著者。Adobe XDとお酒が好きです。

PhotoshopでAPNGやWebPアニメーションを作ろう

Photoshopのタイムライン機能を使ってアニメーションを作成し、APNGやWebPアニメーションとして書き出す方法についてご紹介します。 サンプルファイルサンプルファイルはこちらからダウンロードできます。 タイムラインパネル「m_logo.psd」をPhotoshopで開き、メニューバーの「ウィンドウ」から「タイムライン」をクリックして、タイムラインパネルを表示します。 下向き矢印をクリックし、プルダウンメニューから「ビデオタイムラインを作成」を選択します。 矢印

松下 絵梨

    • Adobe XDとFigmaの違い

      Adobe XDとFigma、どちらもよく使う、どっちも好きという人が増えてきましたね。 共通点も多いアプリだからこそ、「どっちがどっちだっけ」と混乱しないように、違いをざっくりまとめました。 気づいたらまた更新します！ よく使うショートカット図形ツールスタックとオートレイアウトリピートグリッドの代わりに・・・Figmaには、Adobe XDのように、リピートグリッドや、シェイプに画像をドラッグして配置する機能がありません。 下記の工程で、「リピートグリッドに画像を一気に流

      松下 絵梨

      • SVG Tips vol.2 - SVGをウェブページに表示する方法

        前回の記事（SVG Tips vol.1）では、SVGの特徴とIllustratorから適切に書き出す方法について紹介しました。 今回は、書き出したSVGをウェブページに表示する方法について解説します。サンプルファイルも用意しているので、ぜひ一緒に手を動かしてみてください。 サンプルファイルのダウンロード上記のダウンロードボタンからダウンロードできない方はこちらからどうぞ。 SVGをウェブページに表示する方法SVGをウェブページに表示するには、大きく分けて4つの方法があ

        松下 絵梨

        • SVG Tips vol.1 - IllustratorからSVGを書き出す方法

          ウェブページでベクター形式のSVG画像を使うと、拡大しても画像が荒くならない、アニメーションできるなど、様々なメリットがあります。Illustratorからイラストやロゴを適切にSVG形式で書き出して、ウェブページに挿入する方法を、2回に分けてご紹介します。 アイコンやロゴをSVG形式で納品する際に困らないよう、普段ウェブに関わらないグラフィックデザイナーさんにも知っておいていただきたい内容です。 SVGとはSVGはScalable Vector Graphics の略で、

          松下 絵梨

        PhotoshopでAPNGやWebPアニメーションを作ろう

        松下 絵梨

          すぐ使えるXD Tips vol.4 - テキストアニメーションをデザイン編

          Adobe XDの「自動アニメーション」を利用し、背景が透けて見える無限ループテキストアニメーションを作る方法を、動画で解説します。 使用している画像素材と完成形のXDファイルは、こちらからダウンロードできます。 ・background.jpg / 画像素材 ・text_animation.xd / 完成形のXDファイル 動画をご覧いただくのが分かりやすいと思いますが、下記に作業の流れを記載します。 テキストを入力する ①好きな文字を入力します。 テキストの設定は今

          松下 絵梨

          すぐ使えるXD Tips vol.4 - テキストアニメーションをデザイン編

          松下 絵梨

          ［サンプルファイルあり］Adobe XD ユーザーフェス特別企画・自動アニメーションハンズオン講座 当日用資料

          2020年9月26日（土）にオンラインで開催されるAdobe XD User Festival 2020の特別企画として行われるハンズオン講座の資料です。 アーカイブ動画当日の動画はこちらでご覧いただけます。 XDサンプルファイル ダウンロード ハンズオン講座で使用するサンプルファイルは下記からダウンロードしていただけます。 一緒に手を動かしながらAdobe XD User Festival 2020のロゴを動かして、あなただけのアニメーションロゴを作りましょう！

          松下 絵梨

          ［サンプルファイルあり］Adobe XD ユーザーフェス特別企画・自動アニメーションハンズオン講座 当日用資料

          松下 絵梨

          すぐ使えるXD Tips vol.3 - プラグインを使ってみよう編

          Adobe XDには、リピートグリッドやアセット、コンポーネントなど、Webデザインを便利にする機能がたくさん用意されていますが、動作の軽さを維持するために絶対に必要な機能しか入れない方針なのか、「こうだったらいいのに〜」「他のソフトだったらこれできるのに〜」と感じる場面が多々あります。 今回は、そういった“かゆい所”に手が届く、「プラグイン」の導入編として、インストールの方法と使い方について解説します。 サンプルファイルはこちらからダウンロードできます。 はじめに 素敵

          松下 絵梨

          すぐ使えるXD Tips vol.3 - プラグインを使ってみよう編

          松下 絵梨

          すぐ使えるXD Tips vol.1 - ホバーのインタラクションをデザイン編

          Adobe XDの2019年11月の新機能「ホバーステート」を利用し、ボタンにマウスオーバー（ホバー）したときのマイクロインタラクションを作成する方法を解説します。 サンプルファイルはこちらからダウンロードできます。 完成系の確認まず今回の完成系を見てみましょう。 ホバーによって、下記の2つの変化が起こっているのがわかります。 ・角丸長方形の塗りが透明になる（不透明度が0になる） ・テキストの「文字の間隔」が広くなる Adobe XDでは、 「通常状態（マウスが乗っ

          松下 絵梨

          すぐ使えるXD Tips vol.1 - ホバーのインタラクションをデザイン編

          松下 絵梨