カラー ネイビー (10) カラフル (273) スカイブルー (235) ホワイト (1246) ベージュ (440) グレー (443) ブルー (364) パープル (59) ピンク (128) レッド (219) オレンジ (131) イエロー (229) グリーン (322) ブラウン (153) ブラック (547) ゴールド (54) 業種 スポーツ (29) 旅行・ホテル・観光 (158) 美容 (118) エンタメ・趣味・娯楽 (181) 製品・工業・素材 (141) 金融・保険・会計・法律 (49) ファッション・アクセサリー (78) 就職・人材サービス (34) インフラ (26) 不動産・建築・空間・施設 (157) アート (41) 車・バイク他 (18) 事業・組織 (73) 暮らし商品・サービス (154) 飲食・食品・飲料 (496) 行政・NPO・団体・

商用でも無料、かわいくておしゃれなイラスト素材をまとめました。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、さまざまなメディアで無料で利用できます。 ほぼすべてがクレジット表記は必要無しなので、使いやすいと思います。 イラストセンター 個人・商用プロジェクトで無料で利用できます。 現在10,000点以上、分かりやすくて使いやすいイラストが揃っています。カテゴリも豊富で、だいたいのものが揃っています。野菜や果物など、同じテイストでたくさんあるのもいいですね。料理もたくさんの種類があります。一度に利用できるイラストの数は20点までとなっており、詳しくは利用規約をご覧ください。

まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効

2020年の終わりに私たちLoose Drawingは始まりました。最初のころは、訪問者数が1日3人、5人という日もありましたが、今では月間10万人以上の方々にご利用いただいており、この場を借りて心から感謝申し上げます。 しかし、サービスの成長とともに運用コストも増加しています。私たちは、ユーザー体験を最優先に考え、広告は最低限に留めており、広告を増やして収益を上げることもできますが、それは私たちの理念に反します。 ここで皆様にお願いがあります。もしLoose Drawingが皆様の創作活動に少しでも役立っているなら、私たちにコーヒー１杯分のサポートをしていただけないでしょうか。皆様からの温かいサポートが、私たちのサービスを継続し、さらには発展させていく力となります。

この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ

1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーションにも対応しており、かなり便利だと思います。 Boxicons Boxicons -GitHub Boxiconsの特徴 Boxiconsの使い方 Boxiconsを実際に使ってみた Boxiconsの特徴 Boxiconsはオープンソースのプロジェクトで、1,500+種類のSVGアイコン・アイコンフォントが簡単に利用できます。シンプルなデザインは、さまざまなWebサイトやスマホアプリにぴったりです。 けっこう前にも紹介しましたが、アップデートされ続け、アイコンの種類や機能がだいぶ

Animated Pictograms日本に古くから根付く、独特の文化や習慣、 マナーをもっと楽しく、わかりやすく、身近に。 参拝お辞儀餅つきタクシーを拾う入浴手水茶道手締め電車相撲の決まり手阿波おどりComing Soon

はい、というわけでお約束通りWebディレクター向けポートフォリオの作り方です。僕が受託の人間だったので受託向きですが、Web系事業会社側の人でもうまくアレンジすれば使えるんじゃないかと思います。 文末にPowerPointのテンプレートデータも置いておくのでダウンロードして自由にお使いくださいまっせい。 文頭に置かないのは記事を読ませたいからではなく、テンプレートデータだけもらってもたぶんちゃんと使えないんじゃないかなーと思ったからです。 と思ったけど、よく考えたらダウンロードして手元に置きながら読みたい人もいるかなと思ったのでやっぱり先に置いちゃう。 ダウンロードとスライドシェア ■ダウンロード 以下にアップロードしたので、自由に持っていてください。どうぞどうぞ。 ポートフォリオテンプレートをダウンロード ■スライドシェア 一応、スライドシェアもアップしておきます。 Webディレクター用

ここ最近、転職するにあたって約10年ぶりにポートフォリオを作りました。私は元々ポートフォリオ作りが苦手で、力が入りすぎていつまでたっても完成しない…といった状況になりがちだったのですが、今回はわりとすんなり完成しました。 その理由は、ここ数年でデザイナーの採用に関わり、採用担当者の目線で沢山のポートフォリオに目を通す機会が増え、作成において気をつけなければならない点がなんとなく分かるようになったからだと感じています。 そこで今回は、こんなポートフォリオなら選考を通過しやすいのでは？と思うことをまとめてみたいと思います。尚、考え方は企業や採用担当者によって異なるので、あくまでも個人の考えとしてご参照ください。 作成前に踏まえておきたい認識 そもそもポートフォリオとは まず辞書で「ポートフォリオ」の意味を調べてみると、「紙挟み」「折鞄（おりかばん）」とあります。これは書類をまとめて入れておくケ

最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま

グループワークやリモートワークを行う環境で、データを１箇所にまとめて格納できるオンラインストレージサービス「Dropbox」。2011年に日本語対応してからというもの、愛用されている方も多いのではないでしょうか。 かくいう弊社もDropboxをバリバリ使って日々業務を行っております。もはや足を向けて寝られない存在です。 そんなDropboxですが、近年のアップデートにより、データを保存・共有するだけでなく、デザインフィードバックツールとしてもかなり優れていることに気づきました。 実際に使ってみると、弊社でよく使っているデザインフィードバックツール「InVison」と比べても遜色なく、良い感じです。 ということで、今回はDropboxのフィードバッグツールとして良かったポイントをまとめてみましたのでご覧ください。 それではどうぞ！！ とりあえずDropboxファイルにコメントしてみよう まず

The super fast color palettes generator! Create the perfect palette or get inspired by thousands of beautiful color schemes.

スマホ、スマートウォッチ、タブレット、コンピュータ、ディスプレイなど、ほとんどすべてのデバイスが網羅されたモックアップ素材を紹介します。 iPhone 11 Pro, Google Pixel 3などの最新機種をはじめ、古い機種のモックアップ素材も揃っています。

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった

私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク

どんなWebサービスやモバイルアプリでも、必ずと言っていいほどに不可欠なのが、アイコンです。文字だけでデザインされているよりも、アイコンが添えられていた方が、視覚的にも直感的にもわかりやすく、結果的にUXを向上できます。 しかし、欲しいアイコンは探すのが手間で、時間がかかってしまうものです。手っ取り早く、プロダクトにぴったりなアイコンを見つけられるとしたら、どうでしょうか？ そこで今回は、手軽で便利なアイコンパック14選を紹介します。シンプルなもの、カラフルなもの、Webフォントでも使えるものなど、さまざまなアイコンが用意されています。ニーズにあったものがきっと見つかるはずです。 手軽で便利なアイコンパック14選 1. iOS 11 Elements Vol 1 iOS 11 UI Elements Vol 1 「iOS 11 UI Elements Vol 1」は、iOSで使われているよ

今回は、Webサイト構築をスムーズに進めるために欠かせないワイヤーフレームについて、デザイナーではない人にもしっかり使えるものが作成できるよう、要点を押さえながら2回に分けて解説していきます。 はじめに　-　ワイヤーフレームとは なんのために作る？ ワイヤーフレーム（以下、ワイヤー）とは、Webサイト構築の「設計図」。 レイアウトの配置やメニューの内容、重要なコンテンツなどを図として表すことで、関係者同士で「どんなサイトを作るか」という完成イメージを共有し、確認作業やコミュニケーションをスムーズにするために欠かせないツールです。 だれが作る？ 一般的には、デザイナーやディレクターがその役割を果たします。 SOKUTAKUの場合を例に挙げると、小規模サイトではデザインの下書きと、関係者間での確認のためとを兼ねてデザイナーが自分で作成します。 また中規模以上のサイトや、成果を重視したサイトの場

Webサイト構築をスムーズに進めるために欠かせないワイヤーフレーム（以下、ワイヤー）について、デザイナーではない人にもしっかり使えるものが作成できるよう、要点を押さえながら2回に分けて解説していきます。 第2回となる実践編では、以下の要素が確定しているものとして進んでいきます。 これらの要素がまだ曖昧になっている場合は、準備編をもう一度ご覧いただき、付属のワークシートで洗い出しを行ってみてください。 サイトのターゲット・目的 対応機種 レスポンシブWebデザイン採用の有無 対応ブラウザ サイトマップ それではさっそく、実際のワイヤーづくりに入っていきましょう。 ワイヤー作成の流れをより具体的に理解でき、実際の発注時にも使える、テンプレートのセットをご用意しました。 ぜひ、本記事と合わせてご覧ください。 ワイヤーフレーム作成のためのテンプレート詰め合わせ　をダウンロードする（Excel、計3

同人音楽CDや、同人誌の告知サイト（特設サイト）を一瞬で作れるテンプレート「Tokusetsu 3」というのを作った。↓ のリンクから DL できるので拡散希望です。 Tokusetsu 3 - 同人CD・同人誌告知サイトが一瞬で作れるテンプレート sanographix.github.io Tokusetsu 3 とは Tokusetsu 3とは、同人告知サイトに特化したテンプレートである。特に同人音楽の分野では告知サイトをつくる文化が根付いており、それをすばやく簡単に行えるテンプレートとして開発した。2013年に作った Tokusetsu 2 の後継バージョンにあたる。 Tokusetsu 2のリリースからもうすぐ3年が経とうとしており、おかげさまで色々な方に使っていただいている。実際に使われている様子をリリース以来観察してまわっていたのだが、その観察結果をもとにTokusetsu 3