マガジンのカバー画像

Design

15
デザインの裏側、まとめなど
運営しているクリエイター

#デザイン

パラメトリックVIという考え方で作ったロゴの話

パラメトリックVIという考え方で作ったロゴの話

デザインスタジオである STARRYWORKS inc. は17周年を機にVIおよび各種ツール、Webサイトをリニューアルしました。このリニューアルにおいて新しいVIの作り方を考えたので紹介したいと思います。

パラメトリックVIとは?

建築ではパラメトリックデザインという手法があります。アルゴリズムやルールを決めて、パラメータ(変数)の調整により形状を作成する手法です。
また、数学やアルゴリズ

もっとみる
創業10周年施策のデザイン過程と担当者の振り返り

創業10周年施策のデザイン過程と担当者の振り返り

こんにちは、メルカリクリエイティブチームのuoです。2月1日は株式会社メルカリの設立日で、2023年は10歳という節目の年でした。今回は、そんなよき日に公開された10周年施策について「デザイン行程」と「担当メンバーの振り返り」の2パートでお送りします。

10周年施策について今回の10周年施策について、初期から決まっていたことは以下でした。

これまでのメルカリの10年を顧みる

新たに策定された

もっとみる
【デザイン制作秘話】heyのバリューのポスターができました

【デザイン制作秘話】heyのバリューのポスターができました

こんにちは、heyのブランドデザイン本部のPX/BXデザイナーの瀧野です。タイトルにあるように、今年3月に策定したheyの3つバリュー(行動指針)のポスターが完成したので、noteでもお披露目をさせてください🌼

バリューの社内浸透を図るために制作した今回のポスター。この記事では、制作に関わったメンバーへのインタビューを通じて、ビジュアルの開発プロセスやこだわりを紐解いていこうと思います。

もっとみる
クリエイティブスタジオ「HUG」のWebサイトのつくりかた

クリエイティブスタジオ「HUG」のWebサイトのつくりかた

MEFILASのWebサイトの制作方法を事例から紹介する「Webサイトのつくりかた」シリーズも第五弾となりました!今回はクリエイティブスタジオ「HUG」のWebサイトがどのようにしてつくられたのかをご紹介します。

01. 案件概要代表のharu.さん率いる「HUG」は、習慣・常識・社会通念を新しい視点で見つめ直し、クライアントの課題に向き合うクリエイティブスタジオです。

EDのオンライン診療を

もっとみる
ブランドコンサル会社が作る「思想を形にするビジュアル」ができるまで

ブランドコンサル会社が作る「思想を形にするビジュアル」ができるまで

B&H Inc.でストラテジックプランナーとディレクター・プロジェクトマネージャーをやっております金山です。今回はほぼ全ての案件で撮影を行っている弊社が作る「思想を形にするビジュアル」ができるまでの制作過程をご紹介したいと思います。撮影についてのやり方は各クリエイティブ会社によって異なるとは思いますが、意外とビジュアル作りにおける撮影についてフォーカスされた記事がなかったので、この記事が今後のWe

もっとみる
サイト制作を全部自分ですること - Web Development Galleryサイト Easesを作りました

サイト制作を全部自分ですること - Web Development Galleryサイト Easesを作りました

どうも株式会社テルのテルです。先日、Easesと言うWeb Development Galleryサイトをリリースしました。個人での制作です。

この文章は、次回以降の個人制作の指針と誰かが個人制作する際、役に立つかなと思い書いています。

個人でサイトをデザイン、コーディングすべて行い公開って地獄ですよね、分かります。地獄でした。でも制作ドMなんで楽しかったです。

Easesは、こう言ったこと

もっとみる
日本デザインセンター オンスクリーン製作室、ポートフォリオ制作の裏側

日本デザインセンター オンスクリーン製作室、ポートフォリオ制作の裏側

自身が所属している日本デザインセンター オンスクリーン製作室のポートフォリオをリニューアルした。前回は自分たちで、nuxt.jsを使って手作りしたが、今回は外部のエンジニアに協力してもらって中身をしっかり入れようという方針を立てた。
https://ndcosd.jp/

見どころや制作をするにあたって考えたことをいくつか書いてみる。

デザインについて

現在の潮流から外れたデザインだと思う。

もっとみる
Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の3ステップ

Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の3ステップ

先日1500ページくらいのやや大きめなコーポレートサイトのワイヤーフレームをディレクター、デザイナー、テクニカル担当、アシスタントという職能や経験もバラバラのチームで共同作成しました。みなが足並みを揃えて進めていけるようにワイヤーフレームの作り方を要素分解して、共通理解を持って作業をできるようにしました。どのような手順や考え方で進めていったのかをnoteにも記しておきます。

0. 情報設計とトン

もっとみる