デザイナーの高島です。 ベイジには2019年4月に入社しました。webサイトや業務システムのUIデザインを主に担当しています。『knowledge / baigie』でも、デザイン関連の情報を発信していきたいと思います。 デザインツールで制作したデザインデータをコーディングする時、「デザイン通りになっていない」「ルールに一貫性がなくてコーディングに余計な手間がかかった」といったトラブルが起こりがちです。 しかしこれらの大半は、デザイナー側の配慮である程度防げるとも思っています。そこで今回は、私がコーディングを依頼する際にデザイナーとして気を付けていることをまとめてみました。 なお、ベイジが使用しているメインのデザインツールはAdobe XDなため、この記事もXDの使用を前提としています。ただし、ツールに関わらない話も多いはずなので、皆様が使っているツールに置き換えながら、お読みいただけると

「もっと話上手になれたらいいのに」と思っている人は多いのではないでしょうか。 普通のビジネスパーソンは、アナウンサーのような卓越した話術を身に付ける必要はありません。しかし、話上手になることができれば、交渉が得意になり、営業も人事評価も転職活動も有利に進められるようになります。仕事におけるメリットは計り知れません。 私たちの会社でも、特に顧客と直接対話する機会が多いディレクターやデザイナーには、業務知識だけではなく、顧客との話し方についてもなるべくフィードバックしています。会話のクオリティは、サービスの品質や満足度に深く関わると思うからです。 最近は、会話ではなく、メールやチャットで済む機会も増えています。一方で、話上手な人はテキスト・コミュニケーションも大抵上手な印象があります。話術の中には、コミュニケーションに共通する普遍的ななにかが含まれているのでしょう。 こんな記事を書いてはいます

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を

このたび、BtoBサイトの成功パターンをまとめた『BtoBサイト・チェックリスト』とワイヤーフレームを、株式会社ベイジ、株式会社才流、株式会社WACULの3社連名で発表しました。 チェックリスト（PPT版）ワイヤーフレーム（PPT版）ワイヤーフレーム（XD版）ここで取り扱っているBtoBサイトとは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのことです。そしてこの取り組みの根底にあるのは「BtoBサイトにおける車輪の再発明を減らしたい」という3社共通の思いです。 BtoB企業といっても多種多様な企業が存在するように、BtoBのマーケティングやセールスを含む購買プロセスも突き詰めれば、個別の商材特性、顧客特性、業界特性、組織特性、経営環境などの影響を受けた、多種多様なものになります。 しかしながら、個別最適化しか手がないわけでもなく、BtoBビジ

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

2017年に子どもが生まれて以来、私は1年間にわたって継続していたことがあります。それが「お昼寝アート（別名：おむつアート、寝相アート）」をです。眠る子どもがまるで絵本の中のにいるような写真、一度はご覧になったことありませんか？ この世に生を受けて1年目の姿をできるだけ素敵な形で残してあげたいという気持ちから、1歳の誕生日を迎えるまでこの写真を撮り続けようと夫婦の間で決めました。しかし我が家は忙しい共働き。私はフルタイムの会社勤め、妻も産後3ヵ月で仕事に復帰し様々な仕事をかけ持つ非常に忙しい人。日々に余裕なんかまったくありません。 しかし、そんな状況ながらもなんとか工夫を凝らしながら1年間継続するといろんなノウハウが溜まりました。この経験を今後お昼寝アートを作りたい！と考える方のためにできるだけ残しておきたいと思い、まとめたのが本エントリーです。 この記事は有料記事にしていますが、すべて無

ベイジでは定期的にデザイナーMTGを行う。情報共有を目的とし、毎回担当者が進行中の案件を紹介しながら意見交換をする形で取り組んでいる。今回はわたしの担当案件を紹介する回だった。 これまではデザインの完成形を見て、それについて話をするという流れが多かったが、今回は設計から最新のデザインに至るまでの全工程を共有した。実施前に想定していたよりも手ごたえがあり、良い効果があったように感じた。今回はこの案件紹介を通して感じた制作過程を振り返ることで得られる3つの効果について紹介したいと思う。 1.自分の振り返りになる 過去の設計やデザインは一度納品してしまうとあまり見る機会もないが、今回紹介するにあたりもう一度見ることになった。当時に指摘を受けたこと、悩んだ点を思い出し、振り返る時間になった。人に紹介するために指摘を受けたことなどを文章に起こす必要があり、文書記録として残すいいきっかけにもなった。

他人のコードはあくまで他人のもの 入社時からHTMLとCSSをコーディングする際は「汎用性高く作るべき」と教わり、認識と命名ルールの統一・再利用しやすい構造・細分化など汎用性を意識してコーディングしてきた。こうすることで別のエンジニアが作ったパーツも自分のもののように扱え、コーディングが楽になると考えていた。しかし、意識しようが他人が作ったパーツはあくまで他人のもので、テコ入れなしでは怖くて使い回そうとは思えない。 「怖い」というのは、ブレイクポイントごとにどういう挙動をするのかわからないから怖くて使えない、という意味だ。これは他人が作ったからであり、理解するためにはCSSを読まなくてはならず、それでは1から作るのと変わらない。結局は誰もが読みやすい汎用性の高いコードを書いても、他人が作ったものをそのまま使い回してページを構築する気にはなれない。強いて言うのであれば、恩恵を受けるのは作者以

先日、SaaS Designers Meetupというイベントに参加した。今後ベイジでも業務アプリケーションやSaaSに力を入れていく方針であるのと、純粋にBtoBのデザイナーのお話を聞いてみたいと思い参加した。採用、教育、医療、物流分野のBtoB領域のお話を聞くことができ、とても有意義な時間だった。どの会社も事業会社だったのでベイジとは特性は少し異なるが、参考になりそうな点を今回の学びとしてまとめたいと思う。 知識の解像度をあげる 株式会社Shippio 松川さんのお話。Shippioは輸出入代行サービスを展開する物流業界のスタートアップ企業。 株式会社Shippio 松川さん自身、物流業界は全くの未経験だったそうだ。未経験領域の分野をデザインするにあたっては、その領域の知識の解像度をいかに上げるかがポイントとなる。具体的に未経験領域の知識の解像度をしようと思った時に以下のようなことを行

大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使

昨年末の話になるが、今年1年の振り返り面談を行った。入社して3ヶ月ほどが経った中で、良かった点や自分の課題に対してフィードバックをいただいた。自分の中で一番の課題として「仕事に対して自信がない」というものがある。これに対して2つのアドバイスをいただいた。 業務に直結するトレーニングを積み、仕事での成功体験を得ること 今までのわたしは自信がないのはアウトプットの量、すなわち努力が足りないからだと思っていた。「これだけやったから大丈夫だ」という努力に対しての量的な証明が欲しかったのだと思う。しかし、この考え方は方向性が少しずれていて、「業務に直結するか否か」に対する点が足りていなかったと思う。 実業務と方向性の異なる努力を重ねても、仕事では思ったような結果が残せず、いつまでたっても仕事での成功体験を得ることができない。成功体験を得ることができないが故にいつまでも自信が身につかず、次第にアウトプ

日報サイトの更新が今年からスタッフ各自に任されるようになった。これまでは社内編集スタッフが内容を精査して発信していたが、そのチェック機構が各人に委ねられる形となり、原則として一週間に一度、自分の記事を更新することになる。これは言い換えると、強制的に自分の考えを自分の手で世の中に発信することが義務付けられた、というものでもある。 多くの人に自分の意見を発信するというのはどんな形でも緊張するものだ。加えて所属する企業のイメージにも影響を与えることになるため、やはり緊張を伴うものだろう。皆の運営を見ていると、文章量に制限はないといえど、ある程度自分の考えを分かりやすくまとめるためにリライトの時間をとって編集している人が多い。 人によっては恐怖というレベルかもしれないし、更新することにある程度のストレスも感じるだろう。しかし、仕事をする上での基本スキルとして職種を問わず求められる、自分の考えを主張

先日、ある案件のランディングページで初めて設計を担当した。 はじめての設計を通していろいろな学びがあったが、特に学びになったのが、「ベネフィットを具体的な言葉で示す」ということだ。今回の学びも踏まえて、ユーザーにとってのベネフィットを考えた魅力的なコピーの書き方をまとめてみようと思う。設計やデザインを行う上でコピーまで考える必要がある人の参考になると嬉しい。 ベネフィットとは ユーザーがその商品やサービスを利用することによって得られる利益や恩恵のことを指す。メリットに似ているが、メリットはその商品やサービスの特徴や売りになる部分のことで、ベネフィットはそのメリットの先にある恩恵や利益のことを指す。 ベネフィットを考えたコピーの例 他社との差別化を図るうえで重要となってくるベネフィットだが、良い例、悪い例をあげると以下のようになる。 1.　自社製品のカメラを売りたい場合 【悪い例】○○○は業

デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！

fillabはFILが運営するファブ・スタジオ。スタジオでは、デジタル機器やアナログ工作機械を使い、皆様のアイデアを自分たちで自由にかたちにすることができます。豊かな自然と温泉、美味しい食を求めて人が集う南小国で、旅を満喫しながらのモノづくりをお楽しみください。

FGラブリー やわらかな曲線がおしゃれでかわいい印象のフォント。女性向け、キッズ向け、美容院、ネイルサロンなどにおススメ。 利用範囲： 個人利用可 商用利用可 収録文字： 漢字 ひらがな カタカナ アルファベット 数字 記号 ダウンロード先：http://fontgraphic.jp/blog/item/107-fglovelydownload.html GD-高速道路ゴシックJA 高速道路標識の文字に採用されている書体である道路公団標準文字を再現したフリーゴシック体。漢字はJIS第一水準を中心として収録しています。 利用範囲： 個人利用可 商用利用可 収録文字： 漢字 ひらがな カタカナ アルファベット 数字 記号 ダウンロード先：http://www.hogera.com/pcb/font/catalog/

ferret編集部：2015年8月6日に公開された記事を再編集しています。 バナーくらい短時間でできる！と意気込んだものの、思った以上に時間をとられることはありませんか？ 簡単な作業だと思っていたはずが、何回も似たような作業の繰り返しをしているとイライラしてきたり、モチベーションも保てずと負のサイクルへ陥ってしまいます。 そのような問題を解決するためには、バナー作成のための各工程を分解して、何にどれくらい時間がかかっているのかを知り、効率よく作成する方法を知る必要があります。 今回は、30分でバナーを作るための方法として、作業工程と効率化が図れるポイントを順序立てて解説します。 広告バナー制作の全体像 短時間でバナーを作成する前提条件 制作全てに言えることですが、最短距離でゴールまで走るというのが一番の理想型です。バナー制作においても同様です。そのためにも、ゴールまでの筋道を立てる必要があ