Supership デザイナーの竹尾です。デザイナーの採用に関わる機会が多く、今までたくさんのポートフォリオを拝見させていただいてます。 これからポートフォリオをまとめる、という方もいらっしゃると思うので、この記事ではポートフォリオを見る側の視点も交えて、採用担当が会ってみたくなる「良いポートフォリオ」とは何かを書いてみたいと思います。 ポートフォリオが大事なわけほとんどの場合、面接前の書類選考でポートフォリオを見るのですが、99%ポートフォリオでの判断をしています。履歴書・職歴経歴書も、もちろん見ていますがほとんど参考程度です。 特にUIデザイナーやグラフィックデザイナーの場合、アプトプットがデザイナー個人のすべてを語ってしまうので非常に重要です。ごく稀に、書類選考時にポートフォリオが存在しないこともあるのですが、その場合、そもそも合否の判断ができません。 良いポートフォリオとはそれでは

家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手にとらない。 Androidは論外だった。 アプリにはだいたい主要な画面が4つか5つほどあり、簡単にいうとその画面を行き来しながら利用する物が多い。 年寄りにとって一番利用しやすいのは画面がリニアに進むということだ。 アプリをタップしたら常に最初にメニュー画面、メニューからボタンを押したら目的の画面のように進まなければ、そこで理解がむずかしくなる。 アプリによってはアプリタップ後、最後の画面を表示してくれる物も多い。そういうのは年寄りには難しい。まずは元に戻りたいと思うようだ。 スタート画面が設定されているのもあればない物もある。 アプリによってはしばらく時間があると普段とは違うメッセージが出る物もある。 タップでボタンが表示される奴は論外だ。タップの仕方によりボタンが出ない・出るで教える最中に喧嘩になる。 タップ

ページが見つかりませんでした アクセスしようとしたページは削除、変更されたか、現在利用できない可能性があります。 お手数ですが、トップまたはナビゲーションのリンクよりお探しください。

なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです

Web・ゲームクリエイターの転職活動では、自分の作品（成果物）を、応募企業に評価してもらうために、ポートフォリオの作成が必要不可欠です。 Webデザイナーやゲームデザイナー、イラストレーターの転職活動のように、ビジュアル的にわかりやすい作品を持つクリエイターのポートフォリオは作成しやすい一方、Webディレクターやマーケター、プログラマーの転職活動のように、制作した作品が一見しただけではわかりにくい分野のクリエイターは、ポートフォリオの作り方にも工夫が必要でしょう。 ここでは、クリエイターの転職活動におけるポートフォリオの作り方・考え方・見せ方についての基本的なポイントをご紹介していきます。 ポートフォリオとは、クリエイターの転職活動において自身のセンスやスキル、そして業務上の実務能力を評価してもらうための自己PRツールです。単なる「作品集」と捉えず、あなた自身がどんなクリエイターなのかを企

ポートフォリオは自己表現をするツールのため、これといった決まったフォーマットがありません。そのため、どうやって作れば良いのか迷う方も多いのではないでしょうか。 本記事では、現役の転職エージェントに「ポートフォリオの作り方」についてインタビューし、情報をまとめて前述のような悩みを解決できる内容になっています。 また、そもそもWebデザイナーのポートフォリオとは何か、制作段階の各ポイントやWebデザイナーとしてポートフォリオに載せるべき情報など、未経験の方にも分かりやすく解説しています。 さらに、具体的な「参考例」もいくつか紹介していますので、ぜひ最後までご覧になってください。 Webデザイナーのポートフォリオとは？ Webデザイナーのポートフォリオ作りに重要な2つのポイント Webデザイナーのポートフォリオの作り方【未経験OK】 【参考例】現役Webデザイナーのポートフォリオ5選 Webデザ

図ではGMailを例に挙げましたが、他のWebアプリケーションやサイトでも、多かれ少なかれ同様の傾向がみられます。この変化は、一過性で将来またもとに戻るといった類の流行ではなく、UIに関する認知科学等の研究や理論が進んだことによる不可逆な変化です。 利用者のマインドの変化 Webアプリケーションの多くが似たような変化をたどれば、インターネット利用者の側もそれらに徐々に慣れていき、「ちょうどいい」という感覚が変化していきます。上の図を見ていただくと、10年前に「シンプルで使いやすい！」と感じていたUIが今の感覚ではちょっと窮屈に感じられるのではないでしょうか。 歯車のアイコンは「設定」、鉛筆のアイコンは「編集」、点が3つ(…)のアイコンは「その他のアクション」といった、デザインの共通言語もこの10年ほどの間にインターネット利用者のマインドに構築されてきました。いちいち「編集」のように文字ラベ

「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門ウェブメディアのリニューアルで使った手法 こんにちは、BAKEのデザイナー井手口です。 前職では、グラフィックとウェブデザインの両方を経験できる制作会社に所属していましたが、以前から興味があったブランディングデザインを行いたく、今年の4月からBAKEではたらいています。 BAKEに入ってからは、店舗ブランドで使っている原材料のオリジナルブランド「011」のパッケージ開発や、店舗ブランドのイベント用LP作成やPOPなどのデザインを行いながら、同時進行で進めていたお菓子専門のウェブメディア『CAKE.TOKYO』を8月上旬にフルリニューアルしました。 リニューアルの経緯はCAKE.TOKYOのこちらの記事で書いたので、今回は、サイトのデザインについてデザイナー目線から説明しようと思います。 → CAKE.TOKYO 雑誌の

比較対象 育ログ 育児ノート Sprout Baby Tracker 自分がこんなに見た目を重視しているとは思いませんでした。他のふたつは起動してから、「思ってたのと違う」とスグにアンインストールしてしまったのです。 並べてみてみると、その理由も一目瞭然。育ログはやることがシンプルそうなのです。 多機能なのに、シンプルな見た目を実現 赤ちゃんの行動記録をするのには、たくさんの機能が必要です。 おむつ替え おしっこ うんち うんちの状態 授乳 左右 またはどちらか 授乳に要した時間 睡眠時間 寝た時間 起きた時間 その他に散歩や離乳食、予防接種、上記以外に与えたのみものなんかの記録もしたいですね。 実はこの3つ、どのアプリも階層型をベースにしています。 育ログがスゴいと思うのは、テーブルビューを使わずに、タイムラインで表現したところ。 画面を占める範囲がとっても少ないことが分かりますね。タイ

（アニ GIF あるのでちょっと重いです…） マイクロインタラクション事始め以前 @Yahoo!Japan 2016.07.04 先日、とある社内勉強会にて発表する機会があったので書き残しておく。要は最近のフロントエンド開発の流れに疲れて、もうちょっと違う方向で頑張ろうと思った話。 葛藤 Kaizen Platform, Inc. フロントエンドデベロッパーの t32k です。皆さん、ご存知かもしれませんが、Kaizen Platform は A/B テストツールを提供しています。その A/B テストのデザイン案も国内外約 2 千名のグロースハッカーと呼ばれる方々から、クラウドソーシングで調達することができます。なので、自社内にデザイナー抱えてなくても A/B テストが実行可能です。 グロースハッカーの登録自体は無料ですので、デザイナーの方はぜひ登録してもらうと、コンバージョン率の高いデザ

WEBサイト制作 2015.12.06 スマホファースト？リキッドデザインで左固定メニューのWEBサイトを調査 マルチデバイス化とバラエティー豊富なユーザーのモニター解像度。 その課題を解決するためリキッドデザインやスマホファーストのUI設計が多くのWEBサイトに作用されつつあります。 中でもPC表示ではグローバルメニューを左端に固定、スマホ表示ではハンバーガーボタンに切り替えるUI設計が定着しつつあり、BtoCサイトでの採用率は非常に高いと思います。 今回はリキッドデザインでグロバールメニューを左固定というUI設計のWEBサイトをまとめました。 BABY-G PCバージョン スマホバージョン http://baby-g.jp/ これぞ定番のカタチですね。 スターバックス PCバージョン スマホバージョン http://www.starbucks.co.jp/ スターバックスのサイトは珍し

「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手

日本発、本気で学ぶ UX/UIオンラインスクール開講 情熱のある方を 特待生（無料受講生）として 受け入れます ※入学には定員（30名）とポートフォリオやエッセイなどによる審査があります。 Delight Uとは 日本のUX/UIデザイン業界をより活性化させる目的のために作られたオンラインスクールで、 年齢や役職を問わず、本当にUX/UIを学びたい人のためにカリキュラムやツールを用意しています。 Delight Uでは”学んで終わり”ではなく、受講者の今後のキャリアに活用できるよう、 卒業（2～3ヶ月）までに作品をつくっていただきます。

TOP > Technology > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる こんばんは、イイノです。 つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。 これまでのプロトタイピングツールでは難しかった『複数人プロトタイピングでの挙動をトラッキング分析』や、『個別＆全体での行動をレポーティング』といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール『CanvasFlip』。 インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも

お餅のような心と体をもつ男、どうも江刺家です。 2012/01/26UPDATE design()に転載＆連載移行しました。 #目に優しいUIデザイン(1) #目に優しいUIデザイン(2) 主に業務系アプリケーションの開発がおおい弊社ですが、その開発過程でよく出てくるワードに「目が疲れない・飽きない・見やすい」という要求が多いです。 今回はこの「目が疲れない」について、掘り下げたいと思います。あくまで個人的経験・感覚によって記事をまとめています、「人間工学」だとか「なんとか相学」とか「統計データ」とか基にした話ではありませんのであしからず。 色デザインについて もちろんBtoC・BtoBtoCの世界では喜んでもらうのが第一という観点からインパクト重視のデザインがよく見られます。ショッキングピンクの選択なんて朝飯前です。 かっこよく＝とりあえず黒（#000000）背景で指定しとけばいいや。っ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

「さらに詳しく」というフレーズをその場しのぎのリンクラベルとして利用することが増えている。しかし、このテキストは情報の匂いが弱く、アクセシビリティも悪い。このフィラー的な文言に少し工夫をして、次に出るページの内容をユーザーが自信を持って予測できる説明的ラベルにしよう。 “Learn More” Links: You Can Do Better by Katie Sherwin on December 13, 2015 日本語版2016年3月2日公開 トレンドには他のトレンドに比べて目立たないものもある。低コントラストのテキストもそうだが、独立型リンクラベルとして「さらに詳しく」を利用することが静かなトレンドになっている。Webには今、この汎用的なリンクがあふれており、その大部分が、重要度が二次的、三次的な情報をリンク先としている。（Googleで検索すると、この用語の使用例は14億個も出て