エンジニア向けFigmaの使い方を徹底解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
続いてそれぞれのユースケースについて、具体的な使い方を解説します。 Figmaの使い方・操作方法 デザインをもとにコーディングする場合 ‐ Dev mode Dev modeの利用がおすすめです。現在ベータ版で公開されており、2024年中に有料プランのみ使用可能となります。 主な機能として、作成したデザインをもとにコードを自動で生成させることができます。CSS、iOSのSwiftUI、AndroidのXMLなどに対応しています。 具体的な使い方は次のとおりです。今回はログイン画面を例にしています。 画面をセクションで囲む セクション名の右横のコードアイコンをクリック Open in Dev modeでDev modeに切り替える コード化したいコンポーネントを選択すると、右側のInspectでコードを参照できる ワイヤーフレームを作成する場合 ‐ コンポーネント機能 コンポーネント機能を利
＜続編＞Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開いた後の工程｜重松佑 / Shhh inc.
この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA（情報設計）を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか
ただのワイヤーフレームと一歩差をつける！作成するときの10のコツ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのなべちゃんです！ 今回はWebサイト制作では欠かせない、サイトの骨格である「ワイヤーフレーム」の作り方について、紹介していきたいと思います。 LIGではデザイナーがワイヤーフレームを作成することが多いのですが、今回は先輩ディレクターでありデザイナーでもあるほそさんにフィードバックをいただきながら作成していきました。 お客様にとって内容がわかりやすいのはもちろん、デザイナーにとってもデザインしやすいという観点でのフィードバックが、目から鱗の内容だったので、今回学びのアウトプットとしてまとめていきたいと思います！ そもそもワイヤーフレームとは 冒頭でチラッと書きましたが、サイトの骨格・情報の設計図のようなものです。 Webサイトを作成するときに、いざデザインをするとなると、この情報は必要なかった、この情報は入れてほしい、表示順を変えてほしいと出戻りが起こってしま
UI / UXデザイン | ふたり会議｜ムラキ｜note
［概略］ 株式会社すきだよ様のサービス『ふたり会議』のUI / UXデザインを担当。パートナー間のコミュニケーションツールとして、どのような形のパートナーシップでも抵抗なく使えるデザイン、文言、動線を目指して設計を行いました。01 | 目的・背景「ふたり会議」は結婚前にパートナーと価値観を確認できるサービス。2019年9月のリリースに伴い、WEBサイトのデザインのご依頼を頂きました。当初のご相談内容は以下の通り。 ① 質問形式で価値観を確認するものである ② 回答をパートナーと比べて、相違点を発見できるものである ③ WEBブラウザ上で閲覧を行う ④ 今回のサービス立ち上げはβ版の位置付けであり、完璧さよりも早期のリリースを優先する 02 | 要件整理今回はβ版の位置付けとのことで、まず最初に「達成したい目的」「やること / やらないこと」といった、基本的な部分の擦り合わせを行わせて頂きま
ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ
ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作
UXデザイナーが備えておきたいツール・サービス厳選20個まとめ
UXデザインとはユーザーエクスペリエンス(UX)、Webサイトやアプリの使い勝手やユーザーが体験する満足度を重視したデザインのことで、あなたが満足するデザインをつくってもユーザーが使いやすいと感じなければUXが良いとは言えません。 ユーザーのリサーチやテストやフィードバック、プロトタイプやワイヤーフレームの作成、クライアントやチームメンバーとのコラボレーションなどに役立つツール・サービスを紹介します。 20 Valuable Tools For UX Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーのリサーチ・テスト・フィードバック プロトタイプ・ワイヤーフレームの作成ツール コラボレーションのツール ユーザーのリサーチ・テスト・フィードバック ユーザーのリサーチは、プロトタイプを制作する前におこなう
意外とできてる会社ばかりではない！？Webデザインを行う前にすべき、Webディレクション作業まとめ。
こんにちはMUUUUU.ORGの中の人こと、QUOITWORKS Inc.のムラマツです。 最近はWebデザインと、グラフィックデザインが同時に発生する案件を絶賛募集しております！（宣伝） えーと今回は、Webのディレクションというのは正直決まったやり方が存在していないのが現状でありまして、 今の時代の業界標準を確認し直そうと思いまして「第一線のプロがホンネで教える 超実践的 Webディレクターの教科書」を参考に、改めてWebディレクションとは何をする仕事なのか、 Webデザインを始める前段階というところにフォーカスしてまとめました。 目次 前段：コミュニケーションはディレクターのメイン商品 1.ヒアリングをする 2.リニューアルの場合、現サイトの課題だしをする 3.コンセプトを作る（共通言語となる目標を決める） 4.ポジション設定をする（競合に対しての強みを見つける） 5.ペルソナ作り（
「STEP02. サイトマップとワイヤーフレーム」自分のブログをデザインするまでの流れ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。 昨日からはじまった、ブログを作りたい！と考えている駆けだしデザイナーでハンドメイド女子のナミが、ブログをデザインするまでを追っていくシリーズ。 前回は最初のステップ「コンセプト設計」についてお届けしました。 登場人物：ナミ 仕事が休みの日は、だいたい家で小物を作っている。ハンドメイド女子。23歳。時々友達に売ったりプレゼントしたりしていて、評判も上々。 はじめに 一般的に、サイトを制作する際には、Photoshopなどでデザインを始める前に、まずサイトの情報設計を行います。 情報設計とは、ざっくり言うとサイトの目的を果たすために、サイトの中に何を記載するか、どんな機能を設けるのかを決めること。 業務でお客様のサイトをつくる場合、ディレクション、デザイン、コーディング、システム開発……と各フローごとに担当する人が違うことが多いため、お客様を含めた関係者全
必要な物は紙とペンだけ！ペーパープロトタイピングのススメ
まずは紙。家にあるチラシの裏の白い部分でも可能なのですが、方眼のものが製図しやすいです。お気に入りのノートを使ってみてください。後述するプロトタイプ制作ツールのMarvelから、無料のプロトタイピング用紙（PDF）が配布されているので、こちらを使ってみてもいいですね。 基本的にどんなペンでも構わないのですが、太いペン、細いペン、薄い色（灰色）のマーカーの3種類あれば文句なしです。マーカーはなんやかんやコピックが使いやすいのかなーと思います。 その他 紙とペンだけでOKですが、よく使うアイコンが手軽に描けるUI Stencilsという定規兼ステンシルがあると便利です。iPhone用ステンシルだけではなく、様々な種類が用意されているので、興味のある方はUI StencilsのWebサイトを覗いてみてくださいね。 ペーパープロトタイプの描き方 1. ざっくりとしたレイアウト組み まずは画面をレイ
Web制作に超便利なおすすめ無料ワイヤーフレームツール4選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
無料で便利なワイヤーフレームツール4選 POP https://marvelapp.com/pop/ スマートフォンから手書きのワイヤーフレームを撮影して、ページとページを紐付けることができるアプリです。 こちらの動画を見ていただく方が、言葉でご説明するより早そうです。 スマートフォンサイトのワイヤーフレームはどうしても縦長になりがちな印象がありますが、このように実際のスマートフォンから確認ができれば、そこまで気にならなくなるかもしれません。プレゼンテーションにもオススメです。 Justinmind Prototyper http://www.justinmind.com こちらはインストールして使用するツールです。 インストールすると、最初にデバイスを選択する画面がポップアップで表示されます。 次に作成するサイズを選択します。 するとこのような画面になります。 あとは必要な要素を左からド
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成 MOONGIFT
The Blog | Welcome to Adobe Blog
【作り方の参考にも】WEB・アプリ制作に便利なワイヤーフレーム無料ツール11選【サンプル多数/テンプレート】
最近のWeb制作の勉強になる！Webサイトのワイヤーフレーム・ユーザーフローのまとめ
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog