ホットリンクのサイトリニューアル戦略資料を公開（8,000字の解説付）｜#ホットリンク
最終更新日：2019年12月20日 どうも、ホットリンクCMOの飯髙です。 2019年12月16日に、弊社（ホットリンク）のコーポレートサイトをリニューアルしました。 このリニューアルは、BtoBに強いWeb制作会社である株式会社ベイジさんにお願いしました。目に見える変化はもちろん色々あると思いますが、ここでは見た目だけでは分からない、サイトリニューアルの検討プロセスや背景にある意図などを、ベイジさんが作ったサイト戦略資料を元に、詳しく解説していきたいと思います。 ※全スライドはページの最後に掲載しています。 ※当記事はベイジの枌谷さんとの共同制作です。 ※提案資料は提案当時のものをあまり変えず公開しています。古い情報や誤字脱字などが含まれているかもしれませんが、ご了承ください。 旧サイトの課題とベイジさんを選んだ理由 リニューアル前の私たちのコーポレートサイトには、主に以下のような問題が
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
色の組み合わせ方の参考にいい！Webサイトやスマホアプリに適したカラーパレットを生成する無料ツール -Color
指定したカラー、画像、Webページなどをベースに、カラーパレットを生成し、カスタマイズできる無料のオンラインツールを紹介します。 カラーパレットは、Webサイトやスマホアプリに特化されており、コンテンツに使用されるさまざまな要素への適用、アクセシブルなカラーの組み合わせなどが生成されます。 Color Color -GitHub Colorでは、さまざまなリソースを元にカラーパレットを生成し、カスタマイズできます。 既存のWebページをベースに 指定したカラーをベースに カラーボックスをベースに 画像をベースに JSONをベースに 生成したカラーパレットは、CSS, Sass, JSONなどに書き出すことができ、色の名前なども分かります。 まずは、2019年のトレンドカラー「Living Coral」をベースに作成してみました。
Sketchの命名ルールなどをまとめたGuidelineをつくりました - itachoco Sketch Guideline v0.1｜wataame
Sketchの命名ルールなどをまとめたGuidelineをつくりました - itachoco Sketch Guideline v0.1 note初投稿です！株式会社ソウゾウでメルカリ カウルというプロダクトのデザイナーをしている @wataame といいます。 突然ですが、Sketchを使ってアプリのUIなどを作る時に、「このレイヤーの名前どうしよう。。Table View？」と悩んだり、レイヤーの重ね順を「Artboardに配置している順番に上から並べる？」など、悩んだ経験があるデザイナーは多いのではないでしょうか。 どれが正解ということはなく、業界全体として特定のルールがあるわけでもないので、人によって・チームによってマチマチになっているのが現状で、チームに複数デザイナーが居る場合は、お互い空気を読みつつなんとなく合わせようとするけど細かいところはぐちゃぐちゃ。という状況で他の人が作
新人デザイナー必見！ときめきとひらめきの源、デザインリソースで作業を効率化しよう｜Goodpatch Blog グッドパッチブログ
Goodpatch Blogをご覧の皆さんの中には、デザイナー見習いの人や、勉強中の人も多いことと思います。 今回のGoodpatch Blogは、そんな皆さんのためにお届けします。 「デザインのトレンドが知りたいけど、何を参考にすればいいの？」「もっと色んなところからインスピレーションが欲しい！」 という悩みに直面したことはありませんか。 そこで、Goodpatchのデザイナーがよく覗いたり、参照しているサイトをピックアップしてご紹介します。 あなたの仕事をもっと効率的で楽しくしてくれるデザインリソースとして、参考にしてみてください。 1. インスピレーションが得られる Dribbble https://dribbble.com/ デザイナーが使うポートフォリオサイトと言えば、有名なのがDribbbleではないでしょうか。 招待制のサイトであることから、作品のクオリティが高い点が特徴です
リボンフリークス – リボン素材天国
RIBBON FREAKSはTOPECONHEROESダーヤマが制作したリボン素材の置き場です。 規約内で無料で使えるフリー素材となっていますので、忙しいデザイナーさんその他の方は、ここの素材を使ってデザインしてさっさと帰宅しましょう。
サービス設計を依頼できるUXやUIデザインの制作会社 | UXデザイン会社Standardのブログ
新規事業の立ち上げやサービスの改善の際、社内の声だけでなく外部の専門的な意見を求めるために相談できるデザイン会社を探そうとしたことはありますか？ STANDARDでは、「新規事業のアイデアはあるけど具体性が見えない」「リリースしたサービスの数字が伸びない」のような悩みをお持ちの企業に対し、UXデザインやUIデザインのサービスをご提供しており、様々な業界の企業様からお話をいただくことが多いのですが、少人数の会社故、リソースの関係で辞退させていただくことが少なくありません。 そこで今回は、同様にサービスの受託制作を中心に活動されているデザイン会社の中で、個人的につながりのある信頼がおけるデザイン会社を11社ピックアップしてご紹介させていただきます。 1. 株式会社root http://ic-root.com/ 「デザインを通じて事業成長に貢献する」というミッションをもとに、グラフィックや造形
デザインデータのバージョン管理ができるAbstractを試してみた✌ | UXデザイン会社Standardのブログ
複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。 作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください????」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。 そんなデザイナーの悩みを解決してくれるのが、今回紹介するAbstractです。 Abstractとは AbstractはアメリカのElastic Projects, Inc.が提供しているサービスです。どんなサービスか一言で説明すると「デザイナー向けのGitHub」といったところでしょうか。 Gitの仕組みを利用して、デザインデータ（.sketchのみ対応。Adobe系も対応予定）に対してブランチを切ったり変更内容をコミットしたり、差分をマージする、といったことが可能です。 まだ正式リリースはされておらず、現在はPr
デザインの「枯れ」とコンプレクション・リダクション - note
また新しいのが出てきた「コンプレクション・リダクション」という言葉がつくられたらしい。 要は、近頃見られはじめた、最新のiOSガイドラインに適合した、見栄え上わかりやすいようなスタイルを抑制し、禁欲的で、コンテンツに基づいた構成を心がけたつくりのアプリUIのことのようだ。 グラフィックデザインを広義の概念と捉えるなら、この流れはスイス派であるとか、ミニマル、モダンな流れを推し進めただけのように思われる。ことアプリUIデザインの文脈のなかではこういった言い方ができる、ということなんだと思う。 消えかける「俺得」結論からいうと、今回は、「俺得」がどんどん消えていっているので、ちょっとさみしいという話。 「俺得」って何、という点だけど、ちょっと長い自分語りです、すみません。 紙デザインの文脈を延長すれば自動的にモダンなオンスクリーンデザインが得られた僕は、もともとはエディトリアルデザイナーだった
かっこいいロゴデザイン作成のための参考サイト10選＋α | UX MILK
ロゴデザインはプロダクトやサービスのアイデンティティともなる大事なデザイン要素です。 一度制作すると様々なものに繰り返し利用されることが多く、載せる媒体によってサイズや色の制限などが発生し、シンプルに見えるものでも作るとなると難易度は高いものです。 そんな製作者の頭を悩ませる機会の多いロゴデザインですが、制作するにしろ、誰かに制作してもらうにしろ、たくさんのロゴを見るところから始めると良いでしょう。今回はロゴデザインの参考になるサイトを厳選してご紹介します。 ロゴデザインの参考になるサイトまとめ Logaster [PR] Logasterはロゴを自動で作成してくれるWebサービスです。サインインして、任意の文字列と条件を入力するだけでたくさんのロゴを瞬時に作成してくれます（スモールサイズなら無料で利用可能です）。 また、他のユーザーによって作成されたロゴもギャラリーとして閲覧することがで
ランディングページ（LP）構成のノウハウが詰まったエントリー10選
インターネット広告、検索結果の受け口となるいわゆる縦長のランディングページ（以下、LP）は非常に重要なWebページです。ユーザーが求める情報にあわせた構成にすることによって、広告効果アップに大きく貢献します。 一方で、実際に作る際、どのような構成にすればいいのか分からない、という方も多いのではないでしょうか。そこで今回は、LPの構成を学べる記事をまとめてご紹介します。 LPの制作機会がある方、これから作ってみたいとお考えの方はぜひ参考にしてみてはいかがでしょうか。 LPの構成が学べる記事10選 1.要注意！ランディングページ（LP）の“もったいない”をなくす構成要素のポイント http://webbu.jp/landing_page_structure-131 広告効果を高める目的で制作するLPですが、適切な構成でない場合、ユーザーが離脱するミスマッチが起こる可能性があります。せっかくの来
おすすめデザイン入門書10選 : could
たまには本もいかがですか？ セミナーやワークショップのあとに質問を受けることがありますが、「おすすめの書籍はありますか？」と聞かれることがあります。 Web には膨大な情報がありますし、英語まで手を広げると研究者による文献にもアクセスすることができます。しかし、ある特定のトピックを要所を落とさず学びたいときは書籍が便利です。 目まぐるしく状況が変わるだけでなく、デザイナーとして知っておくべき領域も広い今日のデザイン。ソフトウェアの使い方を覚えることも重要ですが、作るための考え方や伝えた方を学ぶことに多くの時間を費やしたほうが良いでしょう。自分のデザインの意図が説明できて、ようやく同僚やクライアントにデザインを理解してもらえるからです。 今回は、デザイナーとして読んでおきたいオススメの入門書を紹介。Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍を
スプラトゥーン風フォント「イカモドキ」公開しました | あらむぎ
ゲーム「スプラトゥーン」で使われているフォントに似せたフォントを作りました。 こちらからダウンロードできます。 ひらがな、カタカナ、数字と、若干の記号類が入っています。 「スクイックリンα」の「α」も再現！ しかしアルファベットが入ってないので、 「リッター３Ｋ」とか「Ｌ３リールガン」は書けません。 公式の漢字は有償フォントらしく、 「スプラトゥーン フォント」で検索すると特定した方の記事が出てきます。 ゲーム内とwebサイトで２種類あるようですが、 どちらも気軽に導入するのは難しそう。 ↑webサイトの方で使われている「RoG2サンセリフ」です。 モリサワパスポートに入っていたので嵌めてみました。 ↑ヒラギノ角ゴの一番太いやつを、横110%に延ばして入れてみました。 微妙。 多分、太いフォントと合わせるのが良さそうです。 キルラキルで使われていた「ラグラン」
自社ロゴのデザインを依頼して完成するまでのストーリーと全ての内部資料を公開します | マーケティスト
個人事業主がロゴデザイナーに自身のブランドのロゴデザインを依頼し、実際に完成するまでの全ての情報をまとめ、全ての内部資料を公開します。本記事を読めばロゴデザイナーの考え方について理解が深まります。 ※記事のタイトルでは「自社ロゴ」としましたが、正確には個人事業のロゴとなることをご了承ください。 ツイート マーケティストの新しいロゴを作成 お客様にロゴの重要性を説明する仕事があります。しかし、そもそも私自身のブランドであるマーケティストのロゴが既製フォントを並べただけのもので独自性がなく、「ブランドを象徴的に示すものとしてロゴ」の重要性を説明をする説得力が欠けていました。 ちなみに以前までのロゴは以下のようなロゴです。 Zapfinoというフォントを使用 個人事業であるマーケティストを創業して約一年。おかげさまである程度の資金的な余裕ができ、仕事の方向性も固まってきました。マーケティストとし
デザイナー必見！！ 女性向けWEBサイトデザインのポイント（2）装飾編 | 津田祐典 | 街角のクリエイティブ
前回は、女性向けWebサイトデザインにおける「配色」のバリエーションについてご紹介しました。今回は、見出し等における細部の「装飾」に絞っていくつかのパターンをご紹介しようと思います。 手書き、アナログ風 女性向け（に限らないですが）、手書き風の文字やかすれた線を用いたアナログ的アプローチは、柔らかい雰囲気を出すオーソドックスな手法の一つです。 かすれた線 出典：サロンドパルール 出典：LEWE market かすれた感じの見出しや囲みの線で、アナログ感を表現。普通の直線を消しゴムツールで適当に削るだけでもできてしまうので、比較的難易度も低いです。また、フォントはゴシック体よりも、線幅が不均等な明朝系の方が馴染みやすいですね。 にじんだボタン 出典：フェリシモ 500色の色えんぴつ 出典：やさい あまうま ル・クルーゼ エッジが少しにじんだようなデザインのボタン。ボタンは必然的に目立つような
ノンデザイナーのための25のグラフィックデザインのコツ | POSTD
>このコツを大いに活用してグラフィックデザインに挑戦してみてください！ ソーシャルメディア向けのデザインからイベント用の招待状まで、どんなデザインであろうと使えるグラフィックデザインのアプリはたくさんあります。 ペアリングフォントやスケールから行揃えやホワイトスペースまで、デザインの世界は複雑な面を持ちます。この25のグラフィックデザインのコツが、創作過程のあれこれを通してあなたの手助けになるでしょう。 各項目をイメージした画像をクリックして、 独自のデザイン に編集してみましょう。楽しいデザインを！ 01. フォント頼みをやめて、書体を制限してみる このデザインを編集してみる シンプルかつ効果的なグラフィックデザインのために読みやすいフォントを使いましょう。いくつもの書体を使用したデザインは読みづらいものです。統一されたフォントを使うようにしましょう。 ここではAileronのフォントフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://amix-design.com/asoboad/wp-content/uploads/2017/08/d76d39486cadcce28ef64f3480558277.jpg
ロゴに適したフォントはこれ！有名ブランドから学ぶ、ロゴのデザインに使用されているフォントのまとめ
Apple Design Resources
新着記事
