7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手
Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—｜Goodpatch Blog グッドパッチブログ
Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採
主な企業サイトの種類と特徴 | knowledge / baigie
ウェブ制作の仕事をしていると、「コーポレートサイト」「オウンドメディア」「製品サイト」「ランディングページ」といった言葉を当たり前のように耳にします。 でもある時、「コーポレートサイトって何だろう？」と思いました。 言葉をそのまま直訳すれば「企業サイト」ということになりますが、そうであるならば、企業が作るオウンドメディアや製品サイトやランディングページもコーポレートサイトではないでしょうか。なぜこれらのウェブサイトのことはコーポレートサイトと呼ばないのでしょうか。 この疑問を切っ掛けに、企業サイトにまつわる数々の言葉の定義をハッキリさせようと考えて、この記事を書きました。 調べてみると、「この言葉はこういう定義じゃ」と決めてくれるウェブサイトの神様のような方がいるわけでもなく、それぞれの会社・現場・人・文脈に応じて、ある程度の解釈の幅をもって使われているのが実状です。 そのためこちらでご紹
アクセシビリティ対応したカラー設計でもっとメールを読みやすく！ Yahoo!メールのリニューアル事例
実際に適用している画面はこちらです。 あえてブラウザ用のルールを定義した部分 一方で、ブラウザという媒体の特性による最適化をした箇所もあります。 アプリはメインのナビゲーションやツールバーのボタンはブランドカラーの赤を使うことが多かったのですが、それをブラウザでそのまま適用するとエラーのように見えてしまいました。アプリの場合はその世界の中で完結するので、独自のデザインルールがあっても受け入れられやすいのですが、ブラウザの場合はページを行き来できるため、全く異なるデザインルールと共存していることになります。 そのため、リンクは青、エラーは赤など一般的に認知されているデザインルールと異なる使い方をする場合は、特に注意が必要になることがわかりました。 上記の点をふまえ、スマートフォン版Yahoo!メールではメインのボタンは黒としました。また、黒を使うときにはタップできることがわかるよう、ボタンの
ドメインモデルからUIデザインとページレイアウトを設計した話｜yuki_sasaki
この記事は SmartHR Advent Calendar 2019 21日目の記事です。こんにちは。デザイナーの@tyoys00です。 初めてAdvent Calendarに参加します。これで私も立派なIT人材です。 UIデザインってなんだろう？突然ですが、デザイナーのみなさんUIデザインしてますか？ してます？ では、UIデザインってなにをデザインすることなのでしょうか？ UIデザインってなんなのでしょう？ 私は何もわかりません。デザイン、何もわからない… 私はこの1年上記のような「UIデザインとはなにを作っていることなのか？」ということばかり考えていた気がします。（そして、気づいたら年末になっていました…）。 結論から言うと、UIデザインとはデータベースやサーバーサイドで実装された構造とフロント側での視覚的な情報構造との対称性を設計することであるという考えに至っています。 この実装の
階層構造を考えたホームページ構成とは サイト構造やツリーの作り方のヒント【第9回】 | 今さら人に聞けないWebの仕組み
Webサイトを作るとき、データをどう整理すればいいのでしょうか？ 雑多にデータを置いてしまうと、サイトの構造はあっと言う間にごちゃごちゃになってしまいます。 みなさんが普段パソコンでフォルダを作成するとき、ごく自然にやっていると思いますが、大まかなフォルダを作ってその中にファイルを格納していきますよね。 それと同じく、Webサイトにもファイル分けが欠かせません。今回はこのファイル分けに使う「階層構造」について説明します。 Webを構成するファイルがどのように置かれているかたとえば、あるサイトで企業情報の「会社概要」というページがあったとします。URLは以下です。 http://www.***.co.jp/company/profile.html 最初の「http://www.***.co.jp」までが、Webサーバーの住所を表していると考えてください。その後ろが、サーバー内のファイルのあり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
