個人的に印象的だった2018年のロゴの変更やリブランディングをまとめています。 仕事柄ITベンチャー系が多いかもしれません。 今年から関連リンクも貼ってみました。 他にも何かオススメのリブランディングがあれば、 SyumpeiMienoまで、お知らせいただけたら、なるべく掲載させていただきます。 1月18日 FABRIC TOKYO FABRIC TOKYOは、オーダースーツのD2Cサービス。 「Fit Your Life.」をコンセプトとしたリブランディングです。 シンボルマークはサービス名の「F」と「T」で、生地を織る様が表現されています。 新しくなったウェブサイトもしっかり綺麗に作られていて良いですね。 1月18日 RIMOWA RIMOWAは、ドイツのスーツケースブランド。 旧ロゴは丸みと枠が印象的でしたが、ストンと細いウェイトのサンセリフに変更されました。 悲しんだファンも多そう

個人的に印象的だった2017年のロゴやブランドの変更をまとめています。 仕事柄IT系企業が多いかもしれません。 1月11日 ロリポップ！ 「すぐに使える、ずっと使える」を掲げたリニューアルです。 ロリポおじさんの流れを継承してデザインされているようですが、ロゴマークのカタチだけを見ても、どこがロリポおじさんの何に当たるか判別が難しいです。 でも、想いを込めることは大切ですね。 1月23日 Mozilla ブラウザのFirefoxやメールソフトのThunderbirdで知られるMozillaもブランド一新です。 Mozillaのブログによると、７ヶ月の期間でリニューアルが達成されたそうですが、大きな組織にも関わらず、スピードが早くて驚かされます。 URLの始まりである「http://」の「://」をMozillaの「ill」に見立てていて、デザインの巧さを感じますね。 このデザインは、インタ

1月19日 Bing 認識してない方も多いかと思いますが、2016年１月に、Microsoft が提供する検索エンジンであるbingのロゴが変更されました。 表記が、bingからBingへと変更され、色については黄色から緑へとダイナミックにアップデートされています。 小文字のbを形どっているであろう、シンボルマークについても、切れ込み部分など、若干変更されています。 2月3日 Uber 日本ではあまり普及していないUberですが、海外旅行好きな方なら一度は利用したことがあるかと思います。 そのUberのブランドリニューアルについては、「Bit」と「Atom」をコンセプトに展開しているそうです。公式BLOGや各メディアで、検討の過程が紹介されていて楽しく読んだ記憶があります。 個人的には、2016年の中でもインパクトが大きかったリニューアルです。 4月1日 オイシックス クリエイティブディレ

自社サービスのデザインと向き合うにあたり、ビジュアル整理の参考に海外サービスを中心にブランドガイドラインに関するページを集めてみました。 今後もみつけ次第、随時更新する予定です。 雑な更新ですが、みなさんの参考になればと思います。 ちなみに現在、79ページ、最終更新：2015-12-14 ※サムネイルは自動取得なので、正しく表示されていない場合があります。 slack

最近のAdobeCCアップデートで実装された、Creative Cloud Libraries通称CCライブラリを使ってみるとすごーく便利だったので紹介します。 AdobeCC始まったな！って感じです。 ちなみにこの記事は、WACULアドベントカレンダーの10日目になります。 プログラミングな記事が大半ですがチェックしてみてください。 WACUL Advent Calendar 2015 CCライブラリはデザイン要素をクラウドで共有して利用できる CCライブラリを使うと、アイコンや写真などのデザイン素材や、文字スタイルやカラーなどの情報を、クラウドで管理してアプリケーションやドキュメントの垣根を超えて利用することができます。 さらに便利な点としてCCライブラリは他のAdobeCCユーザーと共有して利用することもできます。AdobeCCをメインで使っているチームであれば使わない理由は無いかと

ストライプやドットなどのパターンオーバーレイを、 任意の色に編集可能な状態で変更する方法を紹介します。 一般的には、パターンをラスタライズするか、スマートオブジェクト化してから レイヤースタイルのカラーオーバーレイで着色する方法が多いかと思いますが、 その方法では、シェイプのカタチを変更させづらいのです。 1.シェイプにレイヤースタイルでパターンを適用 シェイプを作り、シェイプの塗りを０にして、 レイヤースタイルで任意のパターンを適応します。 ※パターンは塗りと透過で出来ている必要があります。 2.シェイプをグループ化し、レイヤースタイルでカラーオーバーレイを適用 パターンを適応したシェイプをグループ化し、 そのグループにカラーオーバーレイで着色完了です！ 直接シェイプにカラーオーバーレイをすると、 パターンだけに着色されそうですが、透過にしていても 土台となるシェイプ全体に色がついてしま

Photoshopを使う際、煩雑なカラースウォッチで作業している方向けの記事です。 今までスウォッチを特に意識していなかった方にもおすすめです。 案外面倒で放置しがちなスウォッチですが、 整然と管理することで確実に生産性は上がります！ スウォッチを使いこなせば、同じ色と思って使った色が微妙に変わってしまったり、 無駄に色数を増やしてしまいデザインが崩壊するのを防ぐことができると思います。 スウォッチで出来ること 細かく言えば色々ありますが、今回は特に重要な部分を紹介します。 カラーの追加 カラーの削除 スウォッチの保存（カラーリストの保存） スウォッチの読み込み（カラーリストの読み込み） スウォッチの置き換え（カラーリストの置き換え） 簡単に言うと、カラーセットを保存できるし、読み込めるのです。 デザイン（プロジェクト）毎にカラーセットを作る カラーセットは凄く重要です。 これを整理するた

私はワードプレスのおかげでウェブデザイナーになれました。 完全独学の初心者だった私が、ワードプレスで自分のサイトを作る過程で、 ウェブ制作について色々学べたことが強く影響していると思っています。 とにかく、ウェブの世界に興味があるのであれば、まず試してみるのが一番ですね！ そもそも、Wordpress（ワードプレス）とは 細かいことは、WiKiや偉い人のブログにのっているので割愛します。 初心者だった頃の私に箇条書きで説明するならこんな感じです。 自分の好きなアドレス（ドメイン）でサイトを作れる！ プロのウェブデザイナーでブログ書いてる人の大半が使っている！ 更新が楽！それにワードプレスは無料！ インストールが必要で少し難しいけど、サーバーを適切に選べば超簡単に始められる！ 無料のテンプレートが沢山あるから、デザインなんてできなくてもOK！ もっとすごーく色々できるのですが、自分が初心者の

WebデザインにPhotoshopを使い始めて３年目です。 そんな３年目が普段から助けられているPhotoshopの「スマートオブジェクト」を、 普段どう使っているのかを紹介しようと思います。 ちなみに、ファイヤーワークスのシンボルみたいな機能ですね！ 誰かに教わったわけではないので、基本に忠実じゃなかったりするかもしれませんが、 ツールの使い方や機能についての考え方などは、人によって違うってことで勘弁してくださいね！ スマートオブジェクトの便利な使い方 1.写真の元画像を維持したまま編集する 2.コピーした後に一斉に見た目を変更する 3.マスクとして利用する 4.レイヤースタイルを重ねて適用する 5.レイヤーのグループ化に使う 6.Illustratorで作成したオブジェクトをスマートオブジェクトで読み込む ざっとこんな感じでスマートオブジェクトを使っています。 元画像を読み込み直すのが

紙にもウェブにもデザインに日本列島のシルエットって本当に良く使いますよね！ そうでもないね！という方に向けても、 僕なりのイラレを使ったドットな日本地図の描き方を紹介したいと思います。 まず必要なのがドットになる前の日本地図のデータですね。 今回の方法では、背景とシルエットにコントラストの差があれば多分問題無いですが、 ベクターデータな日本地図のデータの方が確実だと思います。 そこで「日本地図　ai」でググってでてきたサイトからダウンロードさせていただきます。 商用でも無料で使えるフリーなベクターデータを扱われているサイトさんですね。助かります。 （しっかり調べていないので、ご利用は自己責任でお願いします。） とりあえず、ベクターデータをイラストレーターで開きます。 ちなみに今回はのこのデータで400px × 400px（ぐらい）です。 早速、このベクターデータを「オブジェクト」→「ラスタ

一応福岡で働くウェブデザイナーなので、福岡市近郊に本社or支社があるウェブな会社さんたちの実績や動きを すぐに勉強できるように、メモ代わりに一覧でまとめてみました。 簡単に言うと、リンク集ですね。 福岡でウェブデザイナーになりたい学生さんや、転職をお考えの方など、 就職活動の時にも便利なんじゃないでしょうか！ ちなみに、あいうえお順です。 新しい会社さんを見つけたら随時、追加していこうと考えています。 ※BM_Shotsっというプラグインでサムネイルを表示している為、一部表示に不具合がある可能性があります。 2018-8-31 更新！只今51社！ 福岡のホームページ制作会社の方へ リンクの削除や、掲載の依頼があればお手数ですがご連絡頂ければと思います。 株式会社アウトワード

Photoshopのパターン定義を使い、ビックリマンシール風の背景を作る方法を解説します。 簡単に懐かしい見た目が作れるのでおすすめです。 1.パターン作成用のファイルを準備 今回は100pxのRGBで作ります。 きりのよい正方形ならなんでも構いませんが、解像度的に考えて、小さく作るのはよくないと思います。 2.キラカードっぽいグラデーションを作る 今回一番のポイントともいえる「円雛形グラデーション」でグラデーションを作ります。細かい部分はお好みで調整してください。ガイドを中心に縦横に引くと作業し易いと思います。 3.キラカードっぽいグラデーションを塗る 全面に塗ります。グラデーションを中心から、良い具合になる角度に引いてください。 4.レインボーのグラデーションを作る 再び「円雛形グラデーション」を選択、グラデーションをスペクトルにして、このように２つ配置します。 5.レインボーのグラデ

その場でブックマークを追加できたりする、ウェブページ用のボタン（ガジェット、ブログパーツ）ですね。 ハテブハテブって周りがやっていても、スルーしていたので、今更ではありますが、はてなブックマークボタンを設置してみました。 簡単にですが、WordPressの場合の事も書いています。 設置の仕方は超簡単。 はてぶ公式の設置方法ページにアクセスして URLとページタイトルを入力して、ボタンのタイプを選らんで、ソースをボタンを設置したい場所に貼るだけ。 （リンク先にもっと詳しく書いてるんですけどね。） でも、このブログは一応WordPressで作っているので、テンプレートタグを使って それぞれの記事のURLとタイトルを取得しました。 設置方法ページの手順１でURLとタイトルを入力したらコードが作られます。 入力したURLとタイトルを URL　→　<?php the_permalink();?> タ

WebデザインやUI/UXに関わる情報や、デザインツールの使い方を発信します。