Add a humaaan touch to your compositions!
Add a humaaan touch to your compositions!
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
こんにちは！ Webデザイナーのおまめです。 私は実務未経験でWebデザイナーとして採用してもらったのですが、「美大も出てないのにどうやってWebデザイナーになったの？」と聞かれることが多くなってきました。 そこでこの記事では、私が全くの初心者から独学でWebデザインを勉強した方法や、Webデザイナーになるまでの過程を詳しく紹介します。また、未経験からWebデザイナーになった友人や先輩の体験談を集めて、叡智を集結させました。 独学でWebデザイナーを目指したい人はもちろん、副業でWebデザインの仕事がしたいという人にも必ず役立つ内容になっているので、ぜひ最後までご覧ください。 「独学で本当に転職できるの？」「仕事とれるの？」と不安な気持ち、よく分かります。Webデザイナーはソフトの使い方やデザインの知識だけでなく、現場レベルの考え方を身につけられるかが大切です。デザイン力を鍛えるためには、
アプリやWebのUI制作では、もうSketchに完全移行したという方も多いのではないでしょうか。VASILYで開発・運用しているファッションサービス「IQON」でも、昨年の夏頃から徐々に移行を開始し、現在はほぼすべてのUI制作をSketchで行えるようになりました。 そこで今回は、Sketch移行を進めた際の「デザインのコンポーネント化」のポイントや、その恩恵をお話したいと思います。 デザインデータの属人化、という問題IQONは2010年にサービスを開始・運用してきたため、デザインデータの量がかなり多く、最新のデータがどこにあるのか分かりづらかったり、デザインデータのつくり方が「属人化」していたことが問題となっていました。 サービスの成長にともない2015年頃から徐々にデザイナーが増えてきましたが、新しいデザイナーが入った際すんなり作業を開始することが難しかったり、急対応が必要な際に作業し
こんにちは、森山です。 最近のブログではレスポンシブWebデザインのことばかり取り上げていますが、実際に現在お受けしているお仕事もほぼ100%がレスポンシブWebデザイン対応でご依頼いただいています。 おかげさまでレスポンシブWebデザインの経験を積ませていただくことができ、制作の際もあまり悩むことは少なくなってきたのですが、そんな今でも「ここどうしよう・・」と私を悩ませることがあるのが「メインビジュアル」（あるいはスライドショー）周りの挙動についてです。 写真だけを表示している場合は単純に縮小すれば問題ないことが多いのであまり困らないのですが、難しいのはキャッチコピーなどのテキストと合わせて表示させたい場合です。実際に制作するサイトはこのパターンがとても多いのですが、写真と同じ比率で文字まで縮小すると読めないし、でもある程度可読性が保てる文字サイズを維持しようとすると今度はレイアウトを再
最近のwebサイトは、トップのスライドショーや、1画面にドーンとメインビジュアルがあるものが当たり前になってきています。 メインビジュアルを作るのが苦手な私ですが、ある程度レイアウトのセオリーを知っておくことで、少しは苦手意識が払拭できるのかなと思っています。 ということで今回は、11のレイアウト手法を元に、参考サイトを33個ピックアップしてみました。 1.反復 同じモチーフを繰り返し置くことで、強調させる手法です。 サイズや色を変えてたり、コマ撮りっぽくすることで、リズム感が出ます。 商品やロゴ、人物など、なにか強調したいものを見せたいときに使えます。 Life is electric SAKUZAN｜美濃焼のうつわ 作山窯 good design company 2.対比 2つ以上の要素を、同じ構図や分量で配置する手法。 情報に優劣をつけず等しく見せたいときに使えます。 webではメニ
コーポレートサイト ブランドサイト･サービスサイト ECサイト･オンラインショップ キャンペーン･特設･プロモーションサイト ポータルサイト･メディア･情報サイト プラットフォーム･コミュニティサイト 採用サイト･採用ページ ポートフォリオサイト スタイリッシュ オーソドックス ユニーク 遊び心がある･作り込まれている イラストを使用 3D表現･3Dイラストを使用 シズル感･訴求力のある写真･動画使用 写真少なめ･写真以外のビジュアル表現 さりげない動き･動きなし やや動きあり ダイナミック･印象的･細やかな動き 日本語メイン ノーコードツール｢STUDIO｣で制作 スマホ特化･モバイルファースト Web･IT･AI･デジタル･テクノロジー･通信関連 サービス･アプリ･ツール 病院･クリニック･歯医者･医療･薬 学校･教育･幼稚園･保育園･スクール 金融･投資･保険･士業 カフェ･飲食店･
ランディングページ（ＬＰ）の作り方を、超重要ポイント７つに絞って説明します。対象読者は、これからＬＰを作成する方です。インハウスのご担当者だけでなく、制作会社さんが読んでも役立つでしょう。作り方だけでなく、コンバージョン率をアップさせる点も、詳しく解説したからです。１回読んで分からなければ、繰り返し読んでください。それだけ価値ある内容になっています。 ランディングページの構成。 まず最初に、ランディングページの構成について、左図を使って説明します。ランディングページの構成は、大きく７つのブロックに分かれます。 キャッチコピー。 お客さんの関心事を、ズバリ指摘します。関心事とは、対象ユーザーが抱える、悩みや課題です。このパートは、メインコピー（１行）とサブコピー（２行）、写真の３つの部分で構成されます。 共感部。 なぜ多くの人が関心を持つのか？ お客さんの気持ちに寄り添いながら、言葉で解きほ
Webデザイナーとして一番最初の会社に就職したとき、よく先輩から「インプットをしろ」と言われた。 Webデザインのブックマークサイトを見たり、Dribbbleを見たり（当時はまだBehanceやPinterestは全然流行ってなかった）するということ。Webに限らずデザイナーなら誰でも一度は言われることだと思うけど、最初はなかなか大変で、苦痛だった。 僕は学生時代から自分のサイトを作ったりはしていたけど、業務は未経験だったので、最初はとにかく仕事をこなすのに必死だった。その時にいただいたフィードバックは今でも自分の中に大切なものとしてしまわれているけど、まぁそれは置いといて。 ただでさえ仕事は未経験のことばかりで大変なのに、それに加えてインプットをするなんて、時間や脳のリソースがない感じ。あと、インプットをしろと言われても、一体どうインプットすればいいんだ？と悩んでいた記憶がある。 インプ
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
Webサービスの運営をしていると、「いかにユーザーを集めるか」と同時に「いかにリピーターになってもらうか」という課題にぶつかります。リピーターになってもらうための一つの施策として考えられるのが、登録ユーザーに定期的にメールマガジンやお知らせメールを届けるメールマガジン。以前であれば、テキストメールを工夫して”文字で魅せて”いましたが、最近ではHTMLメールで非常に綺麗にデザインされたメールが届くことが多くなっています。そこで今回は、以前に紹介したシリコンバレーで教えてもらった美しいWebサービスを中心に、各サービスがどのようなHTMLメールを作って、配信しているかを紹介したいと思います。 人の心を動かすような美しいデザインのメールが届いたら、それだけでサービスを好きになったり、見る目が変わったりします。そんな素敵なメールを集めてみました。 1. zozi http://www.zozi.c
日本語のフリーフォントを利用してデザインする際などに「クールなデザインにしたい」「かっこいいフォントを使いたい！」という場面があるかと思います。 ただ、英語のかっこいいフォントはすぐに見つかるのに、日本語になるとすぐに見つけられないということがあります。 そこで今回は、デザイン性が高くてかっこいい日本語フリーフォントをフォントのタイプに分けてご紹介していきます。 商用利用可能なものから、漢字を含んだもの、カタカナのみのかっこいいフォントまで幅広く用意してみましたのでご覧ください。 かっこいいゴシックフォント 鉄瓶ゴシック 鉄瓶（てつびん）ゴシックは、フォントな自由さんが公開している角ゴシックフォントです。 「源ノ角ゴシック」を改変して制作されており、極太の文字かつごつごつとした質感がかっこいいフォントです。 商用：OK ひらがな：◯ カタカナ：◯ 漢字：◯ ▷ 鉄瓶ゴシック スマートフォン
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
当社がWebサイトを企画・設計するときは必ずユーザ行動の分析から入り、ここ4年くらいはカスタマージャーニーを作ることが定番化している。そのため、Webにおける設計業務の一環としてUXデザインの一部は行っていた。しかしながら、サービスの根幹に関わる類のUXデザイン的な仕事はほとんどなかった。 ところがここ1年くらい、UXのコンサルというか、アドバイスというか、 支援というか 、単にWebのUI改善を超える立場での仕事を依頼されるケースがでてきた。一般企業でもUXという言葉が使われるようになってきており、市場の中で課題意識は高まっている。一方で専門職としてのUXデザイナーはまだまだ少なく、実務に落とせる人材が不足しているからだろう。 そのUX支援っぽい仕事をいくつかする中で、UXを実践するうえで私なりに感じたことがある。その中から4つほどをまとめてみた。 まず1つ目、概念的なUX理論をいくら知
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
アメリカ、特にサンフランシスコ周辺の会社を見てみると、エンジニアに加えてデザイナーの需要が高まっている。これは見た目やUXが優れたプロダクトへの人気が上がっており、企業としてもよりユーザー目線で使いやすくニーズにあった製品を作る為に、企画段階からデザイナーを参加させる事が増えていているからであろう。 それに伴いデザイナーの役割が、これまでの”見た目を美しくする”事から”ユーザー視点で最適な問題解決方法を見つけ出す”へと広がりを見せている。 このビジネスに対するデザインの重要性の高まり-デザインシフト-でデザイナーやエンジニアに求められるその役割と仕事の範囲に変化がおき始めている。恐らく10年程前と比べてみると、それぞれの仕事の範囲が多種多様に広がっているのに加えて、オーバーラップする領域も増えているだろう。 デザインの未来を示す15の変化で下記のような項目があった。 “デザイナーとエンジニ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く