私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを おすすめ度 サイト内検索の可否 いいね/保存機能の有無 ランキング機能の有無 掲載サイト数 を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です！みなさんのデザイン制作に活かしていただけると嬉しいです。 【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう
ちょうどいいWebデザインギャラリー
カラー ネイビー (1) カラフル (251) スカイブルー (224) ホワイト (1208) ベージュ (412) グレー (422) ブルー (343) パープル (56) ピンク (125) レッド (211) オレンジ (122) イエロー (212) グリーン (301) ブラウン (147) ブラック (532) ゴールド (54) 業種 スポーツ (27) 旅行・ホテル・観光 (152) 美容 (107) エンタメ・趣味・娯楽 (177) 製品・工業・素材 (126) 金融・保険・会計・法律 (45) ファッション・アクセサリー (73) 就職・人材サービス (32) インフラ (26) 不動産・建築・空間・施設 (149) アート (41) 車・バイク他 (18) 事業・組織 (71) 暮らし商品・サービス (143) 飲食・食品・飲料 (476) 行政・NPO・団体・協
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo 連載 本当に実践的なデザインドキュメントの書き方 いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか？これはディレクターとデザイナーの分業という状況に起因する問題ですが、分業が一般的なのにはもちろん理由があります。そこで、この連載では、現在の分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、この問題を解決する手段を探ります。 第1回は、受託のWeb制作における一般的な分業体制を詳細に分析し、よりデザイナーが貢献できる役割分担について考えていきます。 なかなかはじめられないUXデザイン これはGoogleトレンドで、「Webディレクター」「Webデザイナー
配色に迷ったらこれ！配色イメージを言語化して論理的に伝えられるスケールがめちゃくちゃ役に立つ「語彙力ない私にうってつけ」
リンク www.ncd-ri.co.jp イメージシステム | カラー戦略の専門家 | NCD-WEB | 色彩心理・生活者研究・トレンド分析の日本カラーデザイン研究所 日本カラーデザイン研究所はオリジナルのカラーシステム「HUE&TONEシステム」やイメージ分析システム「イメージスケール」を開発、発展させてきました。 62 users かたおか＠LP専門Webデザイナー / 著者 @kataokadesign 「Webデザインを学び始めたばかりで配色がうまく決められない」という悩みがあるなら、日本カラーデザイン研究所のイメージスケールを活用すると良いでしょう。 各キーワードに関連する配色が体系化されているので、配色で大失敗する可能性はひとまず減らすことができます。 ncd-ri.co.jp/about/image_sy… pic.twitter.com/QTfzBpQ2EL 2020-1
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
【2020年度版】ホームページ制作会社選びを成功させる54のチェックリスト
すぐにチェックリストを使う チェックリストをダウンロードする アフィリエイト広告を利用しています。 「ホームページを作りたいけど、どの制作会社に依頼したらいいの？」 「ホームページ制作で失敗しないためには、どんな準備をしておけばいい？」 ビジネスをする上で欠かせないホームページ。 ホームページは「疲れを知らない営業マン」と言われるように、24時間365日、商品やサービスの訴求や問い合わせの窓口として活躍してくれます。 しかし、そんなホームページも、作り方や運用を間違えると、活躍の場がない営業マンになってしまいがち・・・。 そんな悲劇を生まないためには、良いホームページの「型」を知っておく必要があります！ そこで登場するのが、ホームページ制作のプロである「ホームページ制作会社」。 餅は餅屋に頼むべし、ということで、ホームページ制作未経験の人が作るホームページよりも、ホームページ制作のプロがつ
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
Udemyで夏の大キャンペーン開催！ はてなブロガーも受講した、Python・機械学習・人工知能など最先端スキルを学べる講座を5つピックアップ - はてなニュース
お盆休みが明けてもう8月下旬。秋に向けて自分が学んでみたいことや身に付けておきたい技術などを見つけ始めるにはよいタイミングです。そこで、オンライン学習プラットフォーム・Udemy（ユーデミー）のオンライン講座をチェックしてみてはいかがでしょうか。 Udemy(ユーデミー)公式サイト Udemyの講座は一度購入すれば受講に期限はなく、PCでもスマートフォンでもデバイスを問わず見られるので、ちょっとした隙間の時間を有効に活用可能。必要な時に必要な講座を選べます。はてなブログを使って、受講内容のまとめや振り返り、学んだことのメモを書いている方も多くいらっしゃいます。今回はUdemyの数ある講座の中から、はてなブログユーザーさんの声も交え、おすすめの講座を5つピックアップしました。 Udemyでは8月30日（金）午後3時59分まで、対象の講座が1,200円から受講できる大セールが実施されています！
Webが進化中！参考にしたい話題の最新ウェブデザイン30個まとめ
デザイン制作のインスピレーションや参考にしたい、2019年に入って注目を集めている、最新ウェブサイトデザイン30個をまとめています。 落ち着いた配色や、美しいセリフ書体、繊細なアニメーション、マイクロインタラクションなどを利用したサイトが増えています。クリエイティブでユニークな最新ウェブデザインを体験してみてはいかがでしょう。 【総まとめ】2018年印象に残った世界のベストWebデザイン厳選51個 2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】 Webが進化中！参考にしたい注目の最新ウェブデザインまとめ Tao Tajima スクロールの強弱に応じて、�3Dモーフィングアニメーション付きでスライダーがヌルヌルと動く、WebGPLの技術を見事に利用したポートフォリオサイト。ページ遷移の滑らかさが、世界でも話題となっています。 Kitamura Makura ま
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
新しい日本語フォントがたくさんリリースされてる！2018年上半期、日本語の新作フリーフォントのまとめ | コリス
2018年上半期にリリースされたものを中心に、ひらがな・カタカナ・漢字が使える日本語のフリーフォントを紹介します。 手書き風の味のあるフォント、明治や昭和風のレトロなフォント、ホラーフォント、ピクセルフォント、ジョークフォントなど、たくさんのフォントがリリースされています。 日本語では珍しいステンシルフォント「木漏れ日ゴシック」は特にお勧め！ ロンドB 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 廻想体ネクストBをベースに、角を丸くしたスピンオフ・フォント。作者様が「あぁ、ホントは『丸い方』を所望なんだろうな。」とモヤモヤしたのを解消するために制作されたそうです。ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2,965字、JIS第2水準漢字486字を収録。
斬新なのに効果的！最近流行している「非平行ヘッダー」の作り方
ホームページの冒頭で、視線を引きつけて大きく印象づけるためにヒーローと呼ばれる画像とキャッチコピーを添えた見せ方をする部分があります。 通常、ヒーロー部分に限らず、多くの区切り目部分を平行に区切っていきますが、あえて四角形のように直線的に区切らずに、曲線や斜めの線などを使って区切っていくデザインが徐々に増え始めています。 今回は、最近よく見かける非平行ヘッダーの実装の仕方を、チュートリアル形式でご紹介します。 長方形で囲むヒーローヘッダーは比較的作りやすいのですが、非直線のヘッダーはどのようにして作られるのでしょうか。 作成手順を見てみましょう。 非平行ヘッダーとは？ 非平行ヘッダー(Non-paralleled header) （非長方形ヘッダー(Non-rectangular header)とも言います）とは、その名の通り2つの平行線で囲まれていないヒーローヘッダーのことをいいます。
2018年に流行しそうな、注目Webデザイントレンド20個を大予想
あっという間に一年が過ぎ、2017年には多くの革新的なデザインが登場しましたが、2018年はどんな一年になるでしょう。今回は、2018年に注目したいデザイントレンド20個を大予想。たくさんのデザイン事例と一緒にご紹介です。 グラフィックデザインの201年トレンドと比較てみてはいかがでしょう。 https://photoshopvip.net/106130 コンテンツ目次 1. 3Dデザインが人気に。 2. ARデザインの増加 3. 3Dタイポグラフィの増加 4. デジタル・ハンドメイド・アート 5. 鮮やかで発色の良い色やグラデーション 6. 2Dを融合した3Dアニメーション 7. フレキシブルな3Dデザイン 8. よりアーティスティックな写真デザイン 9. モダンなレトロイラストレーション / アニメーション 10. カラーフィルタを使った写真デザイン 11. レスポンシブ・ロゴ 12.
Web制作者が知っておきたい！2017年ここ最近、よく見かけるデザインのトレンドのまとめ
2017年ここ最近、よく見かけるようになったデザインのトレンドを紹介します。 トレンドの好き嫌いに関わらず、デザインのアンテナを張っておくことは大切です。今すぐに使うことがなくても、未来のプロジェクトでその知識が役立つかもしれません。 Essential design trends, January 2017 Essential design trends, February 2017 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 視線を誘導する空白スペースの新しい使い方 プロダクトの見せ方 パステルカラーはソフトに 画像のオーバーレイはダーク系 ブルータリズム テキストの新しいエフェクト 視線を誘導する空白スペースの新しい使い方 空白スペースはデザインを素晴らしくしたり、壊したりすることもあります。それが白や背景色、または文
Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法
ノンデザイナーのための配色理論
朝日新聞書評
ためしがき
TechCrunch | Startup and Technology News
