マガジンのカバー画像

Design

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

記事一覧

【2023年総まとめ】特に秀逸だったWebサイト|9組のキュレーターでお届けする特別版

【2023年総まとめ】特に秀逸だったWebサイト|9組のキュレーターでお届けする特別版

2023年もあと数日ですね⛄️🎍
毎年この時期になると、その年に印象的だったサイトをご紹介する記事を書かせていただいていましたが、なんと今年は、僕だけではなく、日頃からWebデザインへのアンテナの感度の高い『8組のゲスト』をお招きした特別企画をお届けします。

毎年楽しみにしていた方も、初めて見てくださる方も、
S5-Style Presents 「2023年総まとめ 特別版」をお楽しみください

もっとみる
パラメトリック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のオンライン診療を

もっとみる
ブランドの世界観が伝わるShopifyで構築されたハイクオリティなECサイト

ブランドの世界観が伝わるShopifyで構築されたハイクオリティなECサイト

おはようございます、こんにちは、こんばんは。アートディレクター / デザイナーとして、先月FRACTAにジョインしました、間部と申します。

これまでのキャリアでは、BtoB企業の案件を中心にWebサイトを起点としたデジタル領域のブランディングを行ってきました。その知見を生かし、今回はFRACTAとは切っても切り離せない関係である、ECプラットフォーム "Shopify” の活用事例の中でも、特に

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

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

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

もっとみる
【2019年総まとめ】WebデザインギャラリーS5-Styleで秀逸だった国産サイト

【2019年総まとめ】WebデザインギャラリーS5-Styleで秀逸だった国産サイト

WebデザインギャラリーS5-Styleとは、通算7000以上のハイクオリティなWebサイトをキュレーションしているWebデザイナーのためのギャラリーサイトです。

2019年もたくさんのサイトをご紹介してきましたが、今回の記事ではその中でも国産限定に絞って特に秀逸なサイトをピックアップしてまとめてみました。ぜひ、冬休みのヒマなときにでもチェックしてみてください。

なお、ご紹介させてもらっている

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

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

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

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

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

Easesは、こう言ったこと

もっとみる
「CHILL OUT」ブランドサイトのつくりかた

「CHILL OUT」ブランドサイトのつくりかた

Webサイトの制作方法を実例でご紹介する「Webサイトのつくりかた」シリーズの第二弾!ということで、今回は各業界で注目の「CHILL OUT」ブランドサイトのつくりかたをご紹介します。

前回の「魔法部ブランドサイトのつくりかた」では、予想を遥かに超えた反響があり、チーム一同大変喜んでおります。今回の記事もWeb制作の参考となるように大ボリュームでお届けしたいと思います!

01. CHILL O

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

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

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

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

デザインについて

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

もっとみる
「魔法部」 ブランドサイトのつくりかた

「魔法部」 ブランドサイトのつくりかた

今回より、Webサイトの制作方法を実際の案件を通してお伝えする「Webサイトのつくりかた」シリーズをスタートします!

Webサイトは目的や狙いによって制作方法はさまざま。いざつくろうとすると...

・制作の進め方がわからない
・企画のアイデアがまとまらない
・どんなデザインが良いか判断できない
・アニメーションが考えられない

など、わからないこともたくさん出てきますよね。

このシリーズでは

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

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

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

0. 情報設計とトン

もっとみる
「FELISSIMO RECRUITING 2021」リクルートサイトのつくりかた

「FELISSIMO RECRUITING 2021」リクルートサイトのつくりかた

Webサイトの制作方法を実例でご紹介する「Webサイトのつくりかた」シリーズの第三弾!ということで、今回は「FELISSIMO RECRUITING 2021」リクルートサイトのつくりかたをご紹介します。

01.概要

フェリシモは1965年創業の大手通販会社です。商品のほとんどがフェリシモオリジナルで、便利な日用品から一風変わったキャラクターグッズや手習いキットなど幅広くかつ数多くの商品を取り

もっとみる