えび🍤

フロントエンドエンジニアです。 元Webデザイナーでデザインツールが好きなので、Adobe XDのアップデートに関する動画を作ったりしています。 ブログ:https://ebifry.jp/ 動画まとめ:https://movie.ebifry.jp/

えび🍤

フロントエンドエンジニアです。 元Webデザイナーでデザインツールが好きなので、Adobe XDのアップデートに関する動画を作ったりしています。 ブログ:https://ebifry.jp/ 動画まとめ:https://movie.ebifry.jp/

    マガジン

    • このデザインどうマークアップする?

      僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善出来る箇所を見つけたりナレッジの共有をします! マークアップエンジニアやフロントエンドエンジニア、デザイナーだけどマークアップ業務もしているという方に読んで頂けると嬉しいです。

      • このデザインどうマークアップする?

    最近の記事

    デザイナーがFigmaを始めたい時に読む記事

    この記事は「Figma Tips Advent Calendar 2022」の22日目の記事です(遅刻しています) 今回は、Adobe XDやIllustrator、Photoshop(その他ツール)を使ってWebデザインをしているけど、そろそろFigmaも触っておこうかな?でも、何から始めれば良いのかわからない!という方に向けた記事です Figmaの始め方という観点の記事はよくありますが、もう他のツールをある程度使いこなしている人にとっては説明が細かすぎて逆に読みにくい

      • 「Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選」の補足記事

        先日、ICS MEDIAにて「Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選」という記事を公開しました。 この記事の中で紹介しきれなかったプラグインや、溢れてしまった情報を補足する為の記事です。是非、上記の記事を読んでから読み進めてみてください。 Figmaプラグインのインストールについて Figmaプラグインはインストールが不要で、ツールメニュー内のリソースパネルから検索して使う方式になっています。 このリソースパネルは2022年6月に実装された比

        • 本当に悲しい報告

          本当に悲しい報告があるので、心に余裕がある時に読んでください 最近、SNSでの活動が行えておらず、僕の存在を忘れられている頃かと思います その理由を報告という形で共有します 自分の中で報告を行えるほど折り合いがついて無かったので、限られた人にしか話していなかった内容です ここまで読んでくれた方は心に余裕があるかと思いますので、本題に入ります 単刀直入に言うと、実家の猫と自宅の猫、母親が亡くなりました ※写真などは無いので、苦手な方も安心して読み進めてください 実家の

          • Adobe XD 2021å¹´6月の新機能まとめ

            Adobe XDの新機能が2分で分かる動画を作成しましたので、まずはそちらをご覧ください。 本記事は、こちらの動画で解説し切れなかった部分を深掘りする内容となります。是非、動画と合わせて最後まで読んでみてください! パスのアウトラインパスのアウトライン化が、今回のアップデートでできるようになりました! ペンツールで適当に書いた線をアウトライン化することで グラデーションを用いた塗り表現などが可能になります もちろん、パスを編集することもできます 今まで、アウトライン

          マガジン

          マガジンをすべて見る すべて見る
          • このデザインどうマークアップする?
            えび🍤

          記事

          記事をすべて見る すべて見る

            Adobe XD 2021年5月の新機能まとめ

            Adobe XDの新機能が2分で分かる動画を作成しましたので、まずはそちらをご覧ください。 本記事は、こちらの動画で解説し切れなかった部分を深掘りする内容となります。是非、動画と合わせて最後まで読んでみてください! 共同編集のライブカーソル こちらの機能が今回の目玉機能となるようです。(公式サイトでオシャレな感じの画像が付いています) 今までは、共同編集を行う際にどのユーザーがどこを操作しているかは、オブジェクトを選択するまで分からないという仕様になっていました。 今

            【2020年版】Adobe XDのアップデートを動画で振り返る

            この記事はAdobe XD アドベントカレンダー 2020の1日目の記事です。 (大幅に投稿が遅れてしまい申し訳ありません!) 2020年は世界的にも大きな変化があり、特にAdobe XDを扱うような業種では、リモートワークが一般化するなど皆さんの生活への影響もあったのではないでしょうか? 今回の記事では、僕が(ほぼ)毎月制作している「Adobe XD最新機能紹介動画」を観ながら、今年1年間のAdobe XDの変化を振り返ります。 今年1年間Adobe XDを使ってきたX

            Adobe XDで作る無限ループアニメーションをマスターしよう

            こんにちは!えびです! Adobe XDには自動アニメーションという、お手軽にアニメーションが作れる機能があります。 今回は、自動アニメーションで作れる無限ループアニメーションの作り方を解説していきます。 無限ループアニメーションとは 先日、以下のようなツイートをしました。 波形が無限ループするアニメーションの作り方です。ただ、かなり駆け足でどのような原理で無限ループを実現しているか、わかりにくかったかと思います。 今回は自動アニメーションの使い方、無限ループの原理の解

            有料
            200

            XDUFes2020「今日から使えるAdobe XD Tips集」のアフターフォロー

            先日、登壇させて頂いたXDUFes2020の発表内容のアフターフォロー記事となります! どんな発表をしたかは以下の記事に纏めましたので、こちらを先に読んでみてください! また、登壇はYouTube配信されており、アーカイブも公開予定ですので、チャンネル登録してお待ちください! 質問への回答僕の登壇中に頂いた質問へ回答します! XDを業務で使うにあたり「これめっちゃ便利じゃん!」と思ったプラグインがあれば教えてもらいたいです! スライド中にプラグインを10個紹介したので

            XDUFes2020「今日から使えるAdobe XD Tips集」

            今回の記事は先日のXDUFes2020で登壇させて頂いた内容を文字起こししたものになります。 オンラインの勉強会だったので、アーカイブも公開予定です。公開され次第更新します。 是非、YouTubeのチャンネルを登録してお待ちください。 早速、発表の内容に入ります! その1 Webデザインだけじゃないスライド作成にも使える! Adobe XDといえば、Webデザインやアプリデザインなどのイメージが強いかと思います。 しかし、実はスライド作成にも向いています!今回、制作し

            Adobe XDの情報をキャッチアップするURLのまとめ

            僕がAdobe XDの情報をキャッチアップする時に見ているURLをまとめます! 数が多いので、ブックマーク替りのnote記事です。 Twitter 日本語ページ最新機能一覧 公式ブログ(連載 Adobe XD アップデート) https://blogs.adobe.com/japan/serialization/adobe-xd-update/ Adobe XD ユーザーガイドの新機能の項 Adobe XD Trail(動画で学ぶ総合学習プログラム) 英語ページn

            画像をキレイに配置できるobject-fitが凄い!

            僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善できる箇所を見つけたりナレッジの共有をする「このデザインどうマークアップする?」シリーズの第五弾です! このデザインどうマークアップする?早速ですが、このデザインどうマークアップしますか? 写真が並ぶギャラリーページですが、画像の縦横比がバラバラですね。 バラバラの画像が、正方形の中に良い感じに納まっているデザインです。 僕の場合このようにマークアップします。 object-fitを使って画像のサイズを調整

            最短2行!CSSで縦横中央揃えをする最新の方法

            僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善できる箇所を見つけたりナレッジの共有をする「このデザインどうマークアップする?」シリーズの第四弾です! このデザインどうマークアップする?早速ですが、このデザインどうマークアップしますか? 画面いっぱいに画像が配置され、中心にテキストが配置されているいわゆる「ヒーローヘッダー」と呼ばれるようなデザインですね。 ここでのポイントはテキストの縦横中央揃えの方法です。 僕の場合このようにマークアップします。 dis

            猫のオススメのトイレ用品まとめ

            猫飼いの皆さん、こんにちは。 猫好きのえびです。 うちにはルイという名前の可愛い猫がいます。 世界一可愛いですね。 実家にも、ふみ、まめという名前の可愛い猫がいます。 世界一可愛いですね。 そんな3匹の世界一可愛い猫の飼育経験がある僕がオススメする、猫ちゃんの為のトイレ用品をまとめます! トイレ本体のオススメトイレ本体はこの商品をオススメします! 「いや、うちの子は今のトイレで十分なんですけど…」と思っている方もいるかと思います。 あなたの家の猫ちゃんは以下のよ

            Google マテリアルデザインに学ぶテキストフィールドの実装方法

            僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善出来る箇所を見つけたりナレッジの共有をする「このデザインどうマークアップする?」シリーズの第三弾です! このデザインどうマークアップする? 早速ですが、このデザインどうやってマークアップしますか? このデザインに見覚えのある方もいるかと思います。 そうです。Google マテリアルデザインのテキストフィールドです。 今回は第一弾、第二弾とは趣向を変えて、既に実装されているものを自分なりの方法で実装し直してみま

            投稿カードのUXを良くするための工夫

            僕が書いたHTML/CSSのコードを皆さんに見てもらって、改善できる箇所を見つけたりナレッジの共有をする「このデザインどうマークアップする?」シリーズの第二弾です! このデザインどうマークアップする? 早速ですが、このデザインどうやってマークアップしますか? 仕様としては「CSS」や「HTML」ラベルをクリックするとカテゴリーページに飛び、画像やタイトルをクリックすると詳細画面に飛ぶというよくある投稿カードです! 僕の場合このようにマークアップします。 正しい文章構成を

            2年間ほぼ毎月制作し続けた僕の解説動画の作り方

            はじめまして、僕はAdobeXDというデザインツールの新機能紹介動画をほぼ毎月作っているえびという者です。 イラレの解説動画を制作しているイラレ職人 コロさんを始め、最近では色んな方がツールの使い方やTipsの解説動画をTwitterやYouTubeにアップしているのをよく見かけます。 僕も解説動画を作るクリエイターの一人として、解説動画を作る上でのナレッジをシェアしたいと思います。 今回はXDやイラレのようにPC上で動くツールの解説動画を想定してお話します。また、特定の