Adobe XD

今日も引き続きAdobeXDの学習。 実践学習で、仮想カフェのHPを作成するというもの。 プロトタイプにリンクの移動先を直感的に矢印で決めたり、 なかなか自由度が高いソフトだ。 自分でも簡単にHPが作成できるような気がしてきた。 実践学習が始まると、一つ一つの課題が長くなり、子供も飽きて 部屋に遊びにきてしまうので、途中で終了。

今日からAdobe XDの学習を開始。 普段見ているサイトはどうやって作っているのか疑問に思っていたので、 なるほどという感じだった。 意外と楽しく学習できそうな課題だ。 ツールも少なく、覚えるのが早そうで、俄然やる気が出てきた。

数多くあるAdobe製品の中から主要なものについて、簡単にご紹介します。中には似たものもあるので、その違いについても書きます。私自身は、PhotoshopとIllustrator、Dreamweaverの3つしか使ったことがありません。他のアプリケーションにも興味があるので、今後使う機会があればと思っています。 Photoshop Illustrator InDesign Premiere Pro After Effects Adobe XD Dreamweaver まとめ Photoshop 画像編集、イラスト作成、Webデザインができます。特徴は、ラスター画像を扱うことです。用途は、以下の…

初めに お疲れ様です。rymです。 週一投稿を初回から無視する計画性の無さに驚きを隠せません。 最近はVue.js + TypeScriptにはまっており、何かアプリ作りたいな～とか考えています。 といった訳で画面設計していくため、今回は表題の通り、Adobe XDでVuetifyのUIキットを使う方法を書こうと思います。 Vuetify UIキットをローカルへダウンロード Vuetifyの公式サイトが準備してくれているUIキットをダウンロードします。zip形式ですので解凍をお忘れなく。 Vuetify 公式 adobe XDで開く XD起動 > 「ファイル」 > 「コンピュータから開く」 >…

confettiってのは紙吹雪って意味らしいです。 その名の通りこのプラグインでは紙吹雪が舞ったように図形を散りばめることができます。 まず適当なサイズのアートボードを作って その上に適当な図形を1個配置し、その図形を選択します。 アートボード上でしかできないみたいですね。 いろいろなパラメータがあり便利ですね。 ランダムで使う色を入力するところはプラグインのタブを広くしないと見えないので注意です！ カラーコードは多分手打ちでやるしかないので少し不便かも ランダムなシェイプを生成することはできなそう。 こんな感じにできます↓ たまに使えるプラグインなんじゃないでしょうか？ Connfettiの…

XDのコンポーネントをインスタンス化後にリサイズするとインスタンスも連動してリサイズされる ただ、すでにリサイズ済みのインスタンスは連動しない複数のステートがあるとそれぞれ独立にリサイズされる インスタンス側をリサイズしても、別のステートのサイズは元のままなので、ステートによって表示を変えるコンポーネントを作っても インスタンス側でリサイズするときに各ステートごとリサイズしなおさなきゃいけなくてとても不便な仕様になっている

XDで Hover State で色を暗くするようにしたコンポーネントを作り 同じ挙動のコンポーネントの中に上記のコンポーネントを含ませる試したところ、子コンポーネントや孫コンポーネントでも マウスカーソルがコンポーネントの上に乗ると色が暗くなるただし、重なっている場合はいずれかのコンポーネントしか Hover State に移行しないので注意が必要

独学でWebデザインを学ぶことは、フレキシブルな学習スタイルと経済的な負担を軽減する方法です。多くの人が自分のペースでスキルを磨き、将来的なキャリアに活かしたいと考えています。独学の最大の利点は、自己学習によって直接的なスキルを身につけられることです。 例えば、オンラインでのコースやチュートリアルを利用することで、最新のデザイントレンドを把握しやすくなります。デザインソフトウェアやプログラミング言語の習得も自分の関心に応じて選択でき、参加しやすい環境が整っています。この自由さが、モチベーションの維持につながるのです。 独学では時間や進捗に対しての柔軟性がありますが、一方で自己管理が求められるこ…

ホームページをはじめとしたUIデザインの設計には、さまざまなツールが使用されていますが、その中でも近年注目を集めているのが**「Figma（フィグマ）」**です。Figmaを使えば、無料で簡単にブラウザ上でUIデザインを作成することができます。 今回は、Figmaの使い方を詳しく解説します。初心者でも気軽に始められるツールなので、ぜひチェックしてみてください。 監修者ライズ株式会社代表取締役 福井亮眞 2016年11月に「学生×副業」で生計を立て、2018年に個人事業主として起業。SNS型投資詐欺、稼げない情報商材に騙されるも、2019年10月に法人を設立後、持ち前の営業力と知識・情報のアップ…

こんにちは、ぽんです いつも訪問ありがとうございます（ブックマーク・スターもありがとうございます） ブログ更新の励みになっています (adsbygoogle = window.adsbygoogle || []).push({}); まさかのまさかなのですが、願ったり叶ったりなのか、会社のホームページに携わる機会を今得ようとしています チームで動いていくのですが、趣味であるホームページ作成がまさか仕事になるなんて最高です そこでホームページ作成に必要なものや手順、スキルはなどをまとめて会社の資料に落とし込むための要素をここにまとめたいと思います 同じようにホームページ作成に携わる方の参考になれ…

現代のデジタル社会では、在宅での副業がますます人気を集めています。テクノロジーの進化とともに、場所を選ばずに収入を得る手段が増え、多くの人が自宅で効率的に稼ぐ方法を探しています。この記事では、在宅で取り組めるネット副業の代表的な10選を紹介し、それぞれの特徴や始め方について詳しく解説します。どの副業が自分に合っているのかを見極めるために、ぜひ参考にしてください。 やりたいことは「副業」で実現しなさい amzn.to 1,493円 (2024年09月15日 19:00時点 詳しくはこちら) Amazon.co.jpで購入する 1. せどり せどりとは、商品を安く仕入れ、高い価格で販売することで利…

デジタル業界において、ユーザーインターフェース(UI)とユーザーエクスペリエンス(UX)は、サービスの成功を左右する重要な要素として注目されています。 UI/UXデザインコース 今回、新たにリリースされた「UI/UXデザインコース」は、マイウェブの実績を基盤に、さらに実践的な学びを提供する内容となっており、UI/UXの基本概念から最新ツールの使い方まで網羅した実践型プログラムとなっています。 このコースの最大の特徴は、デザイン理論だけでなく、実際の制作プロセスやユーザー目線のデザイン思考を学べる点。 基本理論：UIとUXの違い、設計手法、心理学を活用したユーザー中心のデザイン 最新ツールの活用…

副業が注目されている昨今、特に人気を集めているのがWebデザインです。初心者でも挑戦しやすく、スキル次第で収入アップが期待できるため、副業市場でも注目されています。では、実際にWebデザインで稼ぐことは可能なのでしょうか？今回はその疑問にお答えします！ 目次 1. なぜWebデザインが副業で注目されるのか？ 1.1 需要が高まっている 1.2 初期投資が少ない 1.3 場所や時間に縛られない 2. Webデザインで稼ぐためのステップ 2.1 スキルを身につける 2.2 実績を作る 2.3 案件を獲得する 3. Webデザインでどれくらい稼げるのか？ 3.1 初心者の場合 3.2 中級者の場合 …

UXとは UXの定義を理解し、類似する語句との違いや関係性を把握する 代表的なUXの定義 UXインテリジェンス協会の考えるUXの定義 UXの構成要素 UXと混同されやすい語句の定義及びUXとの関係性 UXが重視される背景 1. デジタル技術発展に伴うビジネスの変化を理解する 2. テクノロジーがUXデザインに与える影響を理解する 3. デジタル技術進展に伴う顧客接点・業務オペレーション・ビジネスモデルの変化 4. 近年のデータ活用動向 5. テクノロジー活用によるUXデザインプロセスの変化 まとめ UXデザイン 1. UXデザインの考え方 2. 代表的なUXデザインの手法 3. UXデザイナー…

UXとは 1. UX (User Experience / ユーザーエクスペリエンス) 2. ISOによる定義 3. ニールセン・ノーマンによる定義 4. UXPAによる定義 5. UXのハニカム構造 6. UXの5階層モデル 7. ハッセンツァール・モデル 8. UX白書のモデル 9. ユーザビリティ (Usability) 10. UI (User Interface) 11. DX (Digital Transformation) 12. CX (Customer Experience) 13. EX (Employee Experience) UXが重視される背景 1. OMO (On…

ローソンデジタルイノベーション(LDI)のiOS/Android開発マネージャーの阪口です。 www.ldi.co.jp 前回の開発環境紹介記事(LDIの開発環境を紹介します！(2023年版) - ローソンデジタルイノベーション テックブログ)から変化があるため、2024年の情報をご共有させていただきます。 はじめに 主なプロダクト 開発環境 プロセス 開発ツール CI/CD デザイン 使用ツール 開発 採用技術の全体像 採用アーキテクチャ 使用言語や主なライブラリ 品質 改善活動 締めのご挨拶 はじめに 私たち、ローソンデジタルイノベーション(LDI)は、 コンビニエンスストアチェーン「ロー…

rounin-samurai.com 浪人のサムライです。 約30分でデモサイトができました(笑)。 ま、なんてことはないデザインです。 「デモサイトなので、表示確認はChromeでいいや笑」と思っています。 ホームページ制作は楽しいですが、結構疲れます。 なお、いきなりHTMLコーディングをしていますが、Adobe XDでデザイン見本を作ってからにしようかな？ ま、イラレも持っていますので、イラレでも良いですが・・・。 ちなみに、今はFigmaが流行っている（と思います笑）。 興味はありますが、現在、Adobe XDなりイラレなり使えておりますので、Figmaはお預け（実際は覚えるのがめんど…

15 Top Soft UI and Neumorphic UI Kits 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 デザイナーは常にコンテンツを表示する独特な方法を探しています。しかし、見た目の良さと、アクセシビリティや直感性のバランスを取ることは繊細な作業です。すべてが調和している必要があり、そうでなければ最終結果は損なわれてしまいます。ニューモーフィックUIは効果的な解決策となり得ます。 ニューモーフィズムとは？ ニューモーフィズムは、ソフトUIエレメントに基づいたデザイン技法です。フロスト効果やぼかしガラス効果を想像してください…

プロダクトエンジニアリング部の海老澤です。 普段は LIFULL HOME'S の賃貸領域のフロントエンド開発をしています。 今回はLIFULL HOME'S の UI 構築を手助けするコンポーネントカタログ（以下「カタログ」）を作った取り組みについて紹介します。 最初にお断りしておくと、この「カタログ」はいわゆる 「デザインガイドライン」「デザインシステム」のことではありません🙇