こんにちは。メディアカンパニーデザイナーの譽田です。 2016年度の新卒デザイナー研修の連載もこれで最後です。 これまでは各デザイン領域でどのような研修を行ったのか、そして後輩たちがどんどんスキルアップしていく様子を紹介してきました。 しかし、この研修で成長したのは新卒だけではありません。 私たちも、教えることを通じてたくさんのことを経験させてもらいました。 例年の研修はベテランのデザイナーが担当してきたので、2年目が任されたのは初めてのことです。 「先輩のように上手に教えられるだろうか。」「質問されたら完璧に答えられるだろうか。」入社してちょうど1年。やっと仕事に慣れてきた頃でしたので、最初はそんな不安でいっぱいでした。 しかし結果的には、当初は想定していなかった副次的な効果が得られたと思っています。 この最後の記事では、「新卒を教育する」という目的以外に、2年目だからこそ果たせた役目と

こんにちは。マーケティングソリューションズカンパニーデザイナーの林田と、スポーツナビデザイナーの林です。 みなさん、突然ですが「デザイナー」は一体誰のために存在していると思いますか。様々な定義があると思いますが、デザイナーは「ユーザーのため」に日々サービスを作っている、と私たちは考えています。 デザインには様々な分野があります。その中でもID（インタラクションデザイン）は、ユーザーリサーチから、サイト構造やUIの設計などユーザーの体験（UX）に対応するものづくりを行う部分です。 最も密に「ユーザーのため」について考えながらサービスづくりをしているのではないかといえる分野でもあります。 今回は、そんなIDの研修を担当した私たちより、研修の内容についてご紹介をします。 左から林田、林 講義の概要サービスを作る時、そこにはプロセスが存在します。そのプロセスは会社や人によってそれぞれ少しずつ異なる

左から織田、村山 こんにちは。ヤフオク!カンパニーデザイナーの村山と、マーケティングソリューションズカンパニーデザイナーの織田です。 今回は、ヤフーにデザイナーとして入社した新卒1年目のみなさんがはじめに受ける、新卒デザイナー研修のお話です。今年はその研修の運営、講師を新卒2年目のデザイナーが担当することとなり、わたしたち2人が統括として運営の舵を取りました。 そんな2年目が担当する研修がどのようなものだったのか、そして研修を作り上げる中でどのような思いや難しさがあったかなど、これから5回に渡ってお伝えしていきたいと思います。 まずは人を知るところからヤフーでは研修のはじめに、全社のデザイナーを集めて名刺の交換会を行うのが恒例行事となっています。 今までは先輩の名刺を集められるだけ集めてたくさんの人と交流しようというのが目的でしたが、今年は新卒のみなさんに、入社前に各自名刺をデザインしてき

こんにちは。Yahoo!音声アシストのUIデザインを担当している永尾 正史です。 今回は2016年2月にデザインリニューアルしたYahoo!音声アシスト（Android/iOS）の裏話をさせていただきます。 この度のリニューアルではアプリの機能は変えず、AndroidとiOSで異なっていたUIのビジュアルとアプリアイコンをアップデートしています。 リニューアル前のAndroid版ののGUIが少しメタリックな質感を持った立体感のあるビジュアルであったのに対し、後発のiOS版はOSの標準的なUIに準じて質感や個性を削ぎ落としていました。これらをアップデートするにあたり、OS間で一貫性がある個性を見い出したいということで、まずはプロジェクトのメンバーの頭の中にあるイメージを探ることからはじめました。 ほどよい「あたたかさ」のためのブルーUIのビジュアルデザインに取りかかる前に、Yahoo!音声ア

こんにちは。デザイナーの外崎です。 Photoshopのショートカットはいろいろなところで紹介されています。ただ、初心者の方は「ショートカットって実際どこで使うの？」と感じている人も多いと思います。 Google I/Oで発表されたマテリアルデザインを題材にしてUIを実際に作りながら、ショートカットやTipsの使いどころをチュートリアル形式で説明していきます。マテリアルデザインの特徴である陰の付け方や、配色・マージンの感覚だけでもつかめるかと思います。時間のない方は1セクション毎でも大丈夫です！　テクニックを体で覚えて、実践していただければと思います。 Material Design GuidelinesI/O 2014 アプリに学ぶマテリアルデザイン0.始める前の準備チュートリアル通り進めたい方は、以下のプラグインやアイコンをダウロードしておいてください。特にプラグインは今後Photos

先日弊社にて、「SCRIPTY#1〜フロントエンド紳士・淑女のための勉強会〜」を行いました。 その際に発表させていただいた資料を公開いたします。 遠方の方や、ご都合によりご参加いただけなかった方はぜひご覧ください。 なお、当日はグラフィックレコーディングがなされ、発表内容がリアルタイムに可視化されていました。 そちらの内容も併せてお楽しみいただければと思います。 発表セッション 1.本当にあった怖いCSS 〜BEMのすすめ〜 発表者：小川 健史 実務で実際に遭遇した怖いCSSと、解決策の一つとして、 BEMを導入し得られた知見について発表しました。 発表スライド： http://i.yimg.jp/images/creativeblog/140916/takogawa.pdf グラフィックレコーディング 2.backbone.js 光と闇 発表者：柴田 和祈 Backbone.jsとそのプ

こんにちは！　Yahoo!プレミアムの何でも屋デザイナーやってます今山です。 今回は主催している社内イベント「ライブコーディング」を紹介します。 【社内で話題になった第二回開催ポスター。参加する匠を前面に出し映画風に。デザインは小川高弘さん】 ライブコーディングとは？Yahoo! JAPAN内では様々な勉強会が開催されています。 が、勉強と聞くと拒否反応を示すメンバー（主に私ですが）もいます。 そんなメンバーのスキルアップのきっかけや、ステップアップのヒントになる学び場があればということで、 「匠」と呼ばれる人たちのデザインやコーディング風景を生で見て技を盗もう！という社員向けイベントを開催することになりました。 第一回はHTML・CSS・JSを中心とした匠に、脳派で動く猫耳「necomimi」をつけていただいての開催。 第二回はJS・イラスト・スマホをテーマとした匠に、司会はサンタコスプ

こんにちは。スター育成プログラムに参加中の高田です。 （スター育成プログラムって何？　という方は、こちらも併せてご覧ください。 私は2013年秋から、このプログラムの中の、スマートフォン向けの実験的な広告を作成するプロジェクトに参加しています。 このたび、クルーズ株式会社様からご協力をいただき、ファストファッション通販サイト SHOPLIST.com by CROOZにて、桜をテーマにした広告を制作させていただきました。 結果、従来施策の2倍超のクーポン取得を達成いたしましたので、事例として紹介させていただきます。クルーズ株式会社様によるプレスリリースはこちら Webサイトのデザインをされている方の中には、重要度の高い、ユーザーに見てもらいたい情報がファーストビューに収まらずに苦労した経験をお持ちではないでしょうか。PCとスマートフォンサイト、どちらでも起こることだと思いますが、特にスマー

こんにちは。COO事業推進本部制作部の青柳です。 「そういえば、ヤフーのアイコンなんか変わった？」とお気づきの方、いらっしゃるでしょうか。 2013年6月、PC版トップページに表示する「サービスアイコン」が大幅リニューアルしました。 サービスアイコンとは、サービスの機能などを視覚的にお伝えするもので、そのサービスのシンボルとなるものです。 現在ヤフーには約100種類のサービスがあり、サービスアイコンも同じ数存在します。 今回はそんなサービスアイコンのリニューアルについて書かせていただきたいと思います。 2013年6月、ヤフーのPC版トップページがリニューアルしました。 コンテンツファーストを掲げ、よりシンプルで装飾要素の少ないデザインへ変更となり、 合わせてサービスアイコンもこれまでのリッチな表現とは逆のシンプルなデザインに変更することになりました。 装飾要素を削る画面領域の限られたスマー

COO事業推進本部 制作部の上田です。 1月9日からYahoo! JAPANトップページで新しいロゴが掲載され始めましたが、みなさんお気づきでしょうか…？ ロゴクリーンアップの背景昨年2013年9月に米国のYahoo! incのロゴがリニューアルされました。 Yahoo! JAPANも同じロゴに変わるのでは？と、予想をされていた方もいらっしゃるのではないかと思います。 米国をはじめ、世界各国のYahoo!では紫色のロゴを利用していますが、日本は赤いロゴを使い続けてきたという経緯もあり、これまでのロゴを使うことにしました。 まずは、2013年春に「Yahoo! JAPAN」ロゴの「Yahoo!」部分が米国Yahoo!で一旦クリーンアップされました。「O O」のゆらいでいた形が楕円に近い形になり、「！」の上部も真っすぐになり、（R）マークもなくなりました。 ですが「JAPAN」部分は変更されま

こんにちは、Yahoo!ファイナンス担当デザイナーの平岡です。 Yahoo!ファイナンスAndroidアプリを先日リリース致しました。 アプリのインタラクション設計とビジュアルデザイン制作を担当しました。 今回はアプリがリリースに至るまでのUI決定プロセスと、デザイナー視点での確認ポイントについてお話をしたいと思います。 ■UIの地図アプリコンセプトは、“新たな投資銘柄に出会える”です。 新たな投資銘柄に出会えるための機能とコンテンツを盛り込みました。 書き起こしたサイトマップのページ数は、130ページ程。 まずはじめに、主要なページの画面レイアウトと機能アイデアを盛り込んだUI仕様書を作りました。 UI仕様書をもとに、技術メンバー、企画メンバーと一緒にUI方針を決めていきます。 ＜確認ポイント＞ ・アプリ全体のUI振る舞いは統一されているか ・ユーザーが気づかない機能を盛り込んでいないか

こんにちは、COO事業推進本部 制作部の浮穴です。 今回Yahoo! JAPANアプリではiOS 7に合わせてデザインを変更しました。 デザインを進める上で最も悩んだことは「どこまで振り切ったデザインにするか」でした。 Yahoo! JAPANアプリのユーザー層や利用ログ、OSの浸透速度などを手がかりに検討を重ね、大幅なデザイン変更は実施せず細かな点で最適化し、iOS 6以前のユーザーにとっても混乱が少なく使いやすいデザインを目指し進めることになりました。 ここでは「言われないと気付かないけど実はこんなところが変わりました」というポイントをその狙いと共にいくつか紹介していきます。 ※レイアウトは同じですが、ほぼ全てのパーツのデザインを変更しました。 スクロール時のみ描かれる縦線の存在感 まずはじめに紹介するのは、コンテント列の枠線についてです。今回両端の縦線を省略しました。 恐らく殆どの方

Minyak Telon Habbie Tetap Setia Memberikan Kehangatan untuk Bayi Dari Waktu ke Waktu Manfaat memberikan minyak telon Habbie untuk bayi sudah tidak diragukan lagi. Kehangatan yang ditawarkan oleh minyak yang satu itu tampaknya tetap setia mendampingi para Ibu merawat buah hatinya. Bentuk kasih sayang Bunda pada buah hati memang bisa ditunjukkan dengan membalurkan telon anak ke tubuhnya. Banyak anak