無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪
『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ 2024/05/07 追記 最新の登壇スライドバージョンはこちらです。 登壇時の様子がYouTubeに上がっているのでよろしければあわせてご覧ください。 はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかな
PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/
商用利用無料、UIデザイン用のSVGアイコンが1100種類！Adobe XDやFigmaのツールも完備されてて、これは便利
企業サイトをはじめ、プロダクト、オンラインショップ、アプリ、ブログなど、さまざまな商用プロジェクトで無料で利用できるSVGアイコンを紹介します。 SVGアイコンの数は1,100種類以上で、しかもオープンソース！ さらに、Adobe XD, Figma, Sketchなどでアイコンが簡単に使えるツールもリリースされています。
それなりのショックをそれなりに引きずった。せめて笑い話として誰かのエンタメになってくれ。 様々な要素が重なり赤字13万円 私は決して初参加で1000部刷るような失敗をした訳ではない。毎回アンケートを取るし、界隈の規模とブクマ数や反応具合から予想する。 むしろ過去の同人活動ではイベント後の余りを通販にまわし数日後に売り切れるくらいの、まさに理想の部数を刷っていた。 （１）需要が全く推測できない本 しかし今回は違った。 まずそこは毎回150sp〜200spある赤ブーのプチオンリーだった。プチどころかほぼオンリーサークル（イベント内で自ジャンルで出しているサークルが自分のみ）で30部以下規模の経験しかない私には未知数すぎるジャンルだ。 さらに今回は出すものが漫画でも小説でもなかった。なんなら二次創作ですらなかった。 私は初めての大規模二次創作界隈で「200pフルカラーの評論本（数千円）」という訳
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるiconsaxを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。スタイルは6種類、フォーマットはSVGをはじめ、Adobe XD、Figma、Sketch、Illustratorとさまざまなアプリ用のファイルも用意されています。 iconsax iconsax -GitHub iconsaxの特徴 iconsaxのダウンロード iconsaxのアイコン iconsaxの特徴 iconsaxは、vue.jsのオープンソースのフレームワーク「vuesax」の公式アイコンです。個人でも商用プロジェクトでも完全無料で利用できますが、別の名前で販売および配布はできません。詳しくはライセンスをご覧ください。
AdobeのFigma買収とAdobe XDのこれから
2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで
ウェブ制作の現場で一般的に使われるようになってきたデザインツール「Figma」。そのFigma上で動作する文章校正支援プラグイン「テキスト校正くん」を弊社からリリースしました。無料で利用できます。 テキスト校正くん for Figma 本プラグインを利用することで、画面内の文章を手軽に校正でき、テキストの品質を高めることができます。 「テキスト校正くん」はテキストエディターの「VS Code」（参考）や、デザインツールの「Adobe XD」向けの拡張機能（参考）として以前から公開しており、多くの方に利用いただいています。とくにVS Code版の「テキスト校正くん」は約4万インストールも利用されており、今も利用者が増えています。「テキスト校正くん」の校正機能をさまざまなツールで利用できるよう、今回はFigma向けのプラグインとして新たに開発し公開しました。 「テキスト校正くん」でできること
VS CodeのAdobe XD用拡張機能が登場！ デザインシステムにもとづきコード出力と補完が可能に Microsoftが開発を行っている無償のエディター「VS Code」にAdobe XD用の拡張機能「Adobe XD extension」が登場しました。 この拡張機能を使うことで、Adobe XD上で作成したデザインアセットをVS Code上で参照・編集できるようになります。デザイナーとエンジニア間の溝を埋めることができ、デザインシステム構築のハードルが下がるでしょう。 今回の記事では、「Adobe XD extension」の活用方法を紹介します。コーディングの際に活躍する拡張機能ではありますが、Adobe XDを使ったデザイン段階でのひと工夫も必要になりますので、デザイナーの方も理解しておくとプロジェクトの進行がスムーズになるでしょう。 「Adobe XD extension」と
アドビが、同社のプロトタイピングツール「Adobe XD」の単体販売を終了したことが1月24日までに分かった。すでに、同社プロダクト一覧ページからAdobe XDの項目が消えている。ただし、「Creative Cloud」コンプリートプランには引き続き提供されており、契約すれば新規でのインストールも可能だ。 同ツールについてアドビに確認したところ「Adobe XDについてはメンテナンスモードとすることを決定いたしました」との回答があった一方で、「現在Adobe XDをご利用のお客様のサポートは今まで通り継続してまいります」と説明。既存ユーザーは引き続きAdobe XDを利用できるようだ。 なお、アドビは2022年9月にAdobe XDと競合するデザインツール「Figma」を200億ドルで買収している。FigmaとAdobe XDの棲み分けについて同社は「何も決まっていない」と回答するにとど
2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは事前に「Adobe XDは今後どうなるのか」についての発表をおこなっておらず、ある日突然製品一覧から消したため、利用者が混乱しているというのが現状です。 このブログや私のTwitterでは過去に「Adobe XDのアップデートは止まっており、今にも消えそう」であることを書いていますが、そのことを知らず、突然何が起きたのか分からずに騒いでいる方もいらっしゃるようです。 そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。 追記: 2023年5月に再度確認したところ、Adobeのすべての製品一覧
AdobeXDで画面設計資料を作るときに気をつけること・おすすめの作り方（前編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
Adobe XDで簡単なアニメーションを作る方法を超丁寧に解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのしーちゃんです！ 以前初心者でも作れる！Adobe XDを使って簡単なアニメーショを作る方法の記事を書きましたが、皆さんご覧になりましたでしょうか？ 色々調べた結果、まだまだXDでできるアニメショーンがありましたので、今回もサイトのメインビジュアルにつけるアニメショーンを紹介したいと思います！ このアニメーションの特徴 イラストに動きをつけることで、おしゃれ・先進的といったイメージや、ストーリー性をサイトに持たせることができます。 サンプルのデザインから作ります。 こちらのアニメショーン作るときのポイントは、イラストをそれぞれのパーツに分けることです。分ける理由は、自動アニメショーンを付けるときに一個ずつのパーツを順番に動かすためです。 各パーツのデザインが完了したら、アートボードを選択し、コピー＆ペーストして複製。複製したアートボードを選択し、タイトルとテキストを
アウトプットの精度が上がる！「Adobe XDをプロトタイピングに活かす方法」 研修レポート | メンバーズクリエイターズブログ
2021.3.1 アウトプットの精度が上がる！「Adobe XDをプロトタイピングに活かす方法」 研修レポート ツールデザインナレッジ研修 皆さん、こんにちは。 メンバーズキャリアカンパニー所属ディレクターの森山です。 この度、2021年1月26日にオンラインにて開催された「Adobe XDをプロトタイピングに活かす方法」研修を受講しました。 講師は株式会社まぼろし取締役CMOであり、メンバーズキャリアカンパニーの技術顧問も務めてくださっている益子貴寛さんです。 今回の講義は、Adobe XDの機能の中でも、それぞれのワイヤーフレームやデザインをリンクで有機的につなげて、ブラウザで動く画面を作ることができる「プロトタイピング」という機能にフォーカスした内容でした。 ディレクターやマーケター、プランナーなどのノンデザイナー及びノンエンジニア向けの講座ではありましたが、プロトタイピング自体はU
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは？ Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
デザインスピード1.5倍！？Adobe XDにおけるデザインデータ管理術 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 常に美しいデータ管理を模索中のありさんです。 突然ですが、XDでデザインしているとき、データってカオスになりがちですよね……？ メインコンポーネントがどこだかわからなくなる XDがフリースタイルすぎて、とっ散らかる 自分しか理解できない置き場所になってしまう 自分だけで作っているときは良いですが、いざフロントエンドやバックエンドのエンジニアさんにお渡ししたときに「これどうなってるの……？」って困らせてしまうケース……私はめっちゃあります！！！！！ そんな、プロジェクトの平和のために、ワイヤーフレーム作成、デザイン作成時の管理方法を作ってみました。 今回紹介する管理方法を実際のプロジェクトでも使ってみたところ、プロジェクトメンバーとの意思疎通もスムーズでデザインスピードも1.5倍（体感）くらいになったので、紹介します。 XDデータをつくるうえでの要件 プロジェクトメンバー全員が
Webデザインツールはどれを使えばいいの？
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Webデザインのためのツール（アプリ）はいくつもあるため、Webデザインを勉強し始めたばかりの方は何を使っていいのか迷うと思います。 この記事ではデザインツールの特徴だけでなく、「カード型UIデザイン」を例にWebサイトのデザイン制作に使用する機能の比較をしたり、アプリ間の連携についても触れていきます。 デザインツールの種類デザインツールそれぞれの特徴Webサイトのデザイン制作に使用する機能の比
こんにちは、デザイナーの本田です。こちらは Enigmo Advent Calendar 2020 の2日目の記事です。 今年でエニグモへ入社して3年目。昨年末からUXデザイングループへ異動し、BUYMAのアプリケーション UIデザインがメインになったので、考えることややることが大きく変わった1年だったと感じています。 業務の幅も広がって何を書こうか迷うのですが、今年を振り返ると今までで1番デザインツールと向き合っていたし、学んだことも多かったので デザインツールをXd→Figmaへした話 プロトタイプ作るようになった話 の2つについて書こうと思います。 1. デザインツールをXd→Figmaへした話 デザインデータ引き継ぎの関係上、Adobe Xdをメインで使っていたのですが、今年の7月頃からFigmaへ移行しました。 Xdも使いやすいですし、何よりAdobe Creative Clou
AdobeXDにGoogleスプレッドシートからテキスト情報を流し込むプラグインが便利すぎる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGでWebディレクターをしているなべちゃんです。 Webサイトを制作する際に、クライアントや外部のライターさんにサイトに入れるテキストを依頼をする、というシーンは多いのではないでしょうか？ LIGでもまだテキストが確定していないときは「テキストテキスト……」「ダミーダミー……」と、領域を確保してクライアントやライターさんに依頼をしています。 今回はAdobeXDでワイヤーフレームやデザイン制作をしたあと、Googleスプレッドシートと連携し、Googleスプレッドシート上で書いたテキストがXDに流し込まれるという画期的なプラグインを紹介していきたいと思います！ 実はこのプラグインは、ちゃんれみさんが週に1回開催されているディレクターミーティングで紹介して、「神」「画期的だ」「もっと早くに知りたかった」と歓喜の声が上がっていました👏 私もこのプラグインを知ってからはかなりお
この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA（情報設計）を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか
昨日から開催されているAdobe MAX（10/23まで）と同時に、Adobe XDの最新アップデートがリリースされました！ 今までになかったまったく新しい新機能をはじめ、さまざまな機能の強化、共同編集機能の正式版、中でもCCライブラリ強化とVS Code連携は、ワークフローがさらに改善されると思います。 Adobe XDの新機能 まずは、Visual Studio Code連携。 VS Codeのプラグインとして無料で利用でき、デベロッパーはデザイントークンを数秒で作成し、Web、iOS、Android、Flutterなど複数のプラットフォームに向けてアプリをコンパイルすることができます。コーディング中は、関連するドキュメントやコードスニペットに素早くアクセスすることができます。 プラグインのインストールは、下記ページから。 ※2020年10月20日リリースのAdobe XD34でご利用
UIデザイナーはダウンロードしておこう！iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース
先週リリースされたばかり、iPhoneやiPadに採用されているiOS 14のデザイン用のテンプレートやUI要素が揃ったAdobe XD用の素材を紹介します。 素材はAdobe XD用だけでなく、Photoshop用やSketch用も揃っており、9月に新しくなったSF Symbols 2もダウンロードできます。 Apple Design Resources UIデザイン素材は、ページのちょい下からダウンロードできます。 iOS 14のAdobe XD用の素材は先週リリースされたばかりで、Photoshop用とSketch用、そしてiOS 13もダウンロードできます。
AdobeXDで更新しやすいテーブルの雛形を作ってみた〜コンポーネント・スタック・パディング機能の活用〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのイナッチです。 今回は、Adobe XD（以下：XD）で更新しやすいテーブルのひな形を作りましたので、ご紹介します。 せっかくなのでなぜ更新しやすいテーブルを作ろうと思ったのか？ なぜ作れたのか？ などの背景も合わせてご紹介いたします。が、そんなことはいいから早くテーブルを見たい方は、もろもろスキップしてこちらからどうぞ。 XDで更新しやすいテーブルができるまで XDといえばWebサイトなどの画面デザインのためのソフトというイメージですが、その使い勝手の良さから、デザイン以外の場面でも活用する機会が増えてきました。たとえばLIGのアカウントプランナーのノブさんは、企画書（提案書）をXDで作られるそうです。
初めまして。NRIネットコムに入社し2年目になる、新人デザイナーの馬場です。 Webのコンテンツ制作を生業としているチームで、様々な会社のWebサイトやUIデザインを制作しています！ 私が入社し実際の業務に参画するようになったのは、着任してから3ヶ月後です。 ではその3ヶ月間は一体何をしていたのかというと、日々研修を受けていました。 研修といってもお金を払って外部の講師に教わるものではなく、私が所属しているチームで実際に活躍しているデザイナー・ディレクターが直々に講師となり考えた、オリジナルな内容の研修でした。 なので、研修といえど実務に近いリアルな業務を体感することができました。 ほぼ知識ゼロの新人を一人前のデザイナーとして育て上げていくカリキュラムとして、「デザイン研修」「ディレクション研修」「HTMLコーディング研修」の3つの項目で構成されていました。 今回はその中でも「デザイン研修
Adobe XDでWebサイトを制作したい、ワイヤーフレームの作り方を具体的に知りたい、コミュニケーションやプレゼンテーションツールとして活用したい、基本操作から実務レベルの使い方まで詳しくていねいに解説した一冊を紹介します。 Adobe XDは、Webサイトやアプリの制作で欠かせないツールの1つとして多くのユーザーに支持されています。Adobeユーザー（登録無料）なら無料で利用でき、Webサイトやアプリの制作だけでなく、コラボレーションツールやコミュニケーションツールとしても活躍します。 本書は現役のデザイナー・ディレクター陣が執筆した、Adobe XDの解説書です。基本的な操作から、WebサイトやスマホアプリのさまざまなUIデザインやワイヤーフレームの作成方法、オンラインディスカッションやプレゼンテーションなどの活用方法まで、実務で役立つテクニックが詳しく解説されています。 学べるだけ
Adobe XDで無料のスタータープランを使い続ける方法
Adobe XDはこれまで、有料のプランだけでなく無料のスタータープランがありました。 無料のスタータープランは書き出しや共有に制限があるもののXDのファイルを編集できました。 無料のスタータープランは、デザイナーではない方（営業担当者や経営者、ディレクターなど）がデザインカンプを見たい時や編集をしたい時、自分の考えをデザイナーに伝えたい時などに重宝されていました。 ところが、Adobe XDがバージョン50になってから「無料のスタータープランが使えなくなった」というツイートを多く見かけるようになりました。 その一方で「まだスタータープランは使えるらしい」と言っている方もいます。 どちらかはっきりしないままなのはモヤモヤして気持ち悪いので、Adobe製品をインストールしていないWindows 10にAdobe XDを新規インストールして、スタータープランが利用可能かどうか検証しました。 先
こんにちは。koyaです。 今回は「コロナに負けない！シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由 今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。 もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。 その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。 svg画像の出力 今回はAdobeXDを使用したsvg画像の出力を行います。 書き出す際の設定は下の画像のように 形式→svg スタイル→内部CSS 画像を保存→リンク と設定します。 ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いや
Iconsax
アイコンは、UIデザインにおいて重要な役割を果たします。 メッセージを伝え、独自のブランド観をデザインで表現できます。 しかし、アイコンひとつずつを作成するには時間だけでなく、当然スキルも必要です。 また、プロダクトデザインなどでは、プロジェクトの進行に応じてアイコンは変更されがちで、何度も修正することもあります。 解決法はずばり、どんなプロジェクトに対応するアイコンライブラリを利用すること。 今回は、無料で使えて、クリエイティブな時間を節約できる、高品質な無料SVGアイコンライブラリをまとめてご紹介します。 あらゆる案件に対応できる豊富なファイル形式 豊富な収録数に加え、サイズや配色などのカスタマイズ性、モダンデザイン対応のヴィジュアル性もアピールできる、使い勝手の良いシンプルなアイコン素材が揃います。 MITライセンスで、商用利用も可能なオープンソースの素材が中心で、クライアント案件で
Bloo Lo-Fi Wireframe Kit
DisclaimerNo designers were hurt in the creation of this wireframe kit. All styles and components were created for fun but are extremely useful for when you want to quickly turn your ideas to design and test with crazy folks. Any resemblance to a real product, available or unknown, is purely coincidental. You are free to design anything for personal or commercial purposes, with the help of this ui
Adobe公式サイトに記載のある通り、Adobe XDは今すぐのサポート終了ではないものの、サポート終了にむけて長期の予告期間となっているようです。新規の開発も終了しているようですね。それに伴い、XDの代わりとしてFigmaを検討されている方もいるかと思います。 弊社ではAdobe XDからFigmaへの移行を約2年前に行いました。そこで、これまでにエンジニアが両方のツールを使用して感じた、Figmaの利点と使いにくい点をご紹介します。 Figmaの利点 ページ機能でのアートボード整理が便利 Adobe XDでは1つのキャンバスですべてのアートボードを管理するような構造になっていました。 Figmaではページ機能があり、これを利用してアートボードをグループ化できます。ワイヤーフレーム、要件定義、デザインカンプなどのプロジェクトを各ページに分類・整理することで、作業が効率的に進むようになりま
この記事はAdobe XD アドベントカレンダー 2020の1日目の記事です。 （大幅に投稿が遅れてしまい申し訳ありません！） 2020年は世界的にも大きな変化があり、特にAdobe XDを扱うような業種では、リモートワークが一般化するなど皆さんの生活への影響もあったのではないでしょうか？ 今回の記事では、僕が（ほぼ）毎月制作している「Adobe XD最新機能紹介動画」を観ながら、今年１年間のAdobe XDの変化を振り返ります。 今年1年間Adobe XDを使ってきたXDユーザーの方は、懐かしい気持ちになりながら読んで見てください！ まだ、Adobe XDを触ったことがなかったり最近使い始めた方にとっては新しい発見があるかもしれません。 それでは、１月から振り返っていきましょう！ 2020年1月に登場した機能 AdobeXD 2020年1月の最新機能が2分で分かる動画を作りました 是非、
古いモックアップ素材はアップデート！ iPhone 14, iPhone 14 Proのディテールまで忠実に再現されたモックアップ素材のまとめ
2022年9月にリリースされたiPhone 14, iPhone 14 Pro, iPhone 14 Pro Maxのベクターで作成されたモックアップ素材を紹介します。 Webサイトやスマホアプリのプレゼン・UIデザインで使える高品質で、ディテールまで忠実に再現されたモックアップ素材で、Adobe XD, Figma, Photoshop, Illustratorなど、さまざまなフォーマットが揃っています。
こんにちは。「NieR Re[in]carnation」でアウトゲームの開発を担当しているクライアントエンジニアの佐藤です。本記事では「NieR Re[in]carnation」のアウトゲーム開発フローと開発に用いたツールについて紹介していこうと思います。 目次 前提rapid開発とはRabbitとはおわりに 1. 前提 「NieR Re[in]carnation」では、UIに強いこだわりを持って作成を進めていました。特にアウトゲーム開発では、こだわりを実現するために、とにかくまず全部を繋いで最後まで作って壊してを繰り返して開発していくという方針を選択しました。 そのため、開発のイテレーションを早く回す必要がありました。 それらを実現するための開発フロー検討し、進めていきました。その開発フローを社内ではrapid開発と呼んでいます。 2. rapid開発とは rapid開発とは、迅速に画面
「源ノ角ゴシックとNoto Sansならトラブルないと思ってました」的 AdobeXDで使うフォントの話｜Risa Yuguchi
この記事はAdobe XD アドベントカレンダー 2020 の2日目の記事です。 ときどき相談をうけるのですが、Adobe XDでWebサイトやサービスをデザインするときにどのフォントを使っていますか？ 最近では商用利用できる日本語フォントの種類はかなり増えました。一方Adobe XDは、Adobe FontからインストールできるフォントであればCreative Cloudとしての性質で自動的にインストールしてくれますし、USBで繋いでないデバイスプレビューでも自動的にダウンロードして表示してくれます。 今回は定番かつ安定的に使用できる二つのフォントと利用するときに注意が必要なフォントを二つ解説しました。 [おすすめ/名前注意]源ノ角ゴシック次の二つの条件のうち片方が揃ったらこれを選ぶのがおすすめ。 ・MacとWindowsの人が混ざっている ・スタータープランの人が参加している源ノ角ゴシ
【ディレクター向け】ワイヤーフレーム作成に役立つ4つのプラグイン【adobe XD】 公開日 : 2021.12.08 最終更新日 : 2022.10.06 ディレクション ディレクターやデザイナーがWeb制作時によく使用するアプリ「adobe XD」はプラグインが豊富で、「これできればいいのに〜」ということや手の届かないかゆい所に丁度いいプラグインが沢山あります。 今回はそんなXDのプラグインを4つご紹介します！ Split Rowsまずは何を差し置いてもこれかなと！ このプラグインは改行で区切られているテキストを一行ずつにバラす(分解してくれる)アプリケーションで、私自身ディレクション業務の中でワイヤーフレームを作成する際に、クライアントからテキストなどの素材をいただくのですが、例えば沿革などの多数の行になってしまう素材などに非常に役立ちます！ unDrawこちらのプラグインは、手軽に
XDを使った大規模プロジェクトのデザイン手法 | クリエイターのための総合情報サイト CREATIVE VILLAGE
Adobe XDが正式リリースされて約3年。そろそろプロジェクトに導入してみたい。でも、まだ実際のプロジェクトで本格的に導入したことがない…という方もいらっしゃるのではないでしょうか。 そこで、複数人のデザイナーが関わる大きなプロジェクトにおいて、XDを用いた効率的かつ品質を落とさないデザインの進め方をご紹介させていただきます。 金本 幸奈（かねもと・ゆきな） 株式会社メンバーズ UX/UIデザイナー2014年中途入社。大手キャリアアプリのUX/UIデザイン監修、企業サイトやメディアサイトのリニューアルでは情報設計からデザイン領域まで担当。開発の知見を活かし、CMS組み込みを考慮したデザイン支援やデザインガイドラインの策定を中心に行なっています。重度のガジェットヲタク。 デザインをする上での制約 まずはじめに、会社員として働くデザイナーのみなさまは、様々な制約がある中でいかによいデザインを
関わっている現場の一つで、デザインツールをAdobe XDからFigmaに移行しました。その時に今までFigmaを使ったことのないメンバー向けにFigma勉強会などを開催し、すぐに使い始められるようサポートをしました。 その経験の中で、これからFigmaを使い始めるXDユーザーが理解に時間がかかる点や躓くところをまとめてみました。 ファイル構造と管理構造 XDは1つのXDファイルの中にアートボードで各種画面を作成します。またCreative Cloudのグループ版およびエンタープライズ版ではチーム内でXDファイルを共有できます。 Figmaファイル内の構造 Figmaは1つのFigmaファイルの中に、pageという階層があります。pageの中にFrameで各種画面を作成します。 Figmaアカウントのファイル管理構造 Figmaでは1アカウントごとにDraftとTeamがあり、それらの配下
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
同人誌を刷って13万円の赤字を出した話｜hot / 箱野
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる、SVG完備のアイコン素材 -iconsax
文章の品質向上に役立つ！ Figmaのプラグイン「テキスト校正くん」を公開 - ICS MEDIA
VS CodeのAdobe XD用拡張機能が登場！デザインシステムにもとづきコード出力と補完が可能に - ICS MEDIA
Adobeの製品一覧から「Adobe XD」が消失 ～買収した「Figma」への一本化で提供終了？【1月26日追記】／収録させてもらっている窓の杜も寝耳に水【やじうまの杜】
「Adobe XD」単体販売を終了、サポート継続へ Figmaとのすみ分けは「何も決まっていない」
Adobe XDは利用できなくなるのか、Adobeに問い合わせました | Stocker.jp / diary
最新版で比較するAdobe XDとFigmaの違い - デザイン機能編 - ICS MEDIA
デザインツールをXd→Figmaへした話 / プロトタイプ作るようになった話 - エニグモ開発者ブログ
＜続編＞Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開いた後の工程｜重松佑 / Shhh inc.
Adobe XD 2020年10月の新機能！ついにVisual Studio Codeと連携可能に
新人デザイナーが入社後スキルアップした研修3step - NRIネットコムBlog
Adobe XDによるUIデザイン・ワイヤーフレームの制作方法を豊富な実例から学べる、UIデザイナーにお勧めの良書
SVG画像のHTMLでの使い方 | バシャログ。
【商用無料】シンプルなUIデザイン向けベストSVGアイコンライブラリ42選
エンジニアがAdobeXDからFigmaに移行して感じたこと | techlab / baigie
【2020年版】Adobe XDのアップデートを動画で振り返る｜えび🍤
NieR Re[in]carnationのアウトゲーム開発
【ディレクター向け】ワイヤーフレーム作成に役立つ4つのプラグイン【adobe XD】
XDユーザーがFigmaを使う時に知っておくと理解が早まるポイント
almond.clinic
www.goodcross.com
anond.hatelabo.jp
self-matome.blogspot.com
nayaminasi.hateblo.jp
www.nikkansports.com