タグ

webデザインに関するshouhei1123のブックマーク (92)

  • 【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新|ryota_funakoshi

    【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新 こんにちはデザイナー社長の船越です!久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から 「どこから画像を引っ張ってくればいいかわからない😭」 「日々の情報収集どうすればいいの?🤔」 という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました!デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです!たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ!」というのがあればぜひコメントで教えてください! 日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し

    【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新|ryota_funakoshi
  • 『未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie』へのコメント

    Twitter連携機能をご利用のみなさまへ 代替手段として、ブックマーク完了後の共有メニューを新たに追加いたしました Twitter共有ダイアログの追加 こちらは、シェアアイコンがONの場合のみ表示されます Twitter・マストドン共有ボタンの追加

    『未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie』へのコメント
  • デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna

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

    デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント|Tomoyuki Arasuna
  • [デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる!アートディレクション15の定番パターン|金 成奎

    [デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる!アートディレクション15の定番パターン ウェブデザイナーが作った成果物に対して、満足はしていないのだけどうまく言語化できなくてどうやって指示したらいいか分からない、あるいはクライアントからのフィードバックをどう咀嚼して伝えていいか分からない、結果的にデザイナーを上手くディレクションできていない.......。そんなお悩みをもったウェブディレクターいませんか? ここでは実際のデザインを見た時に感じること・あるいはクライアントが指摘しがちなことについての「あるある」を、15の事例に集約してまとめてみました。デザイナーとコミュニケーションしてデザインをブラッシュアップする上での、ある種のアートディレクションの手引きとして活用してもらえればと思います。 1.「野暮ったい」と感じたら・言われたら。 「野暮ったい」とは

    [デザインが苦手なウェブディレクター向け] これだけ覚えればデザイナーに指示できる!アートディレクション15の定番パターン|金 成奎
  • デザインガイドライン

    ガイドラインについて Webページデザインの理解向上・品質の均一化などを目的としたガイドラインです。 対象 Webデザインの一般慣習を理解している。 Photoshop Illustrator などのツールの基操作ができる(CS6以上。できるだけ最新版を推奨) HTML/CSSの概念をそれなりに理解している。 大事なこと デザイン = 設計すること。アート性だけではなく、操作性・エクスペリエンスも考慮し設計する。 エンドユーザーの目線移動、操作性、SEO、導線なども考慮する。 目的をもってデザインする。 目的を理解してデザインする。 お金を払ってもらうためのデザインであることを理解する。 個人での制作と違い、お客様はデザインされたサイトにそれなりの大金を払うことになります。 大金払ってるのにダメなデザインで満足するわけないよねー。ということ。 デザイン基事項 お客様の要望、サイトを制作

  • GALLERY

    株式会社エコンテによるインフォグラフィック作成サービスの紹介サイト。インフォグラフィックスの作品ポートフォリオも多数掲載。

  • インフォグラフィック.jp

    株式会社エコンテによるインフォグラフィック作成サービスの紹介サイト。インフォグラフィックスの作品ポートフォリオも多数掲載。

  • デザインの引き出しを増やしておこう!最近のWebサイトで見かけるデザインの新しいテクニックのまとめ

    新しいデザインを見かけるとワクワクしますよね! 2017年も半年が過ぎ、さまざまな新しいデザインを見かけるようになりました。最近のWebサイトで見かけるデザインのテクニックとその使い方を紹介します。 3 Essential Design Trends, July 2017 3 Essential Design Trends, June 2017 3 Essential Design Trends, May 2017 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダウンページ ナビゲーション ボックスをデザイン要素として使う 垂直のライン 小さいテキストの要素 幾何学的なレイヤー ぼかしを使った画像 スクリーンいっぱいのヒーローイメージは後退 斜めを使ったレイアウト 分かりやすいアクションボタン ダウンページ ナビゲーション ナ

    デザインの引き出しを増やしておこう!最近のWebサイトで見かけるデザインの新しいテクニックのまとめ
  • ウェブデザインに応用するデザインの4つの基本原則

    的な考え方の指針となる、デザインの4つの基原則 あなたは後輩のデザイナーにどのようにデザインを指導していますか?または、先輩デザイナーからどういった指導を受けましたか?その時、どんなことが指針になりましたか? 私の所属するbaigieは先日オフィス拡張のための引越しを終え、新しいスタッフを迎え入れる体制が整いました。今後は新たなデザイナーの方を迎えて、制作の体制をさらに強化していく予定です。ここで冒頭でも触れた件ですが、先輩であるデザイナーは後から入った後輩に説得力をもって「デザインとはこうあるべきだよ」という説明ができなければなりません。 「なんとなくこっちの方がかっこいいでしょ?」「これは俺の経験から見てナシだなあ」といった具合に、論理的な説得力が無い説明で伝えても、それは後輩デザイナーに間違ったデザインの考え方を植え付け、その場しのぎの考え方を周囲にまで蔓延させることにもつなが

    ウェブデザインに応用するデザインの4つの基本原則
  • 誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック

    【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか? ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの? ・結局一番言いたいことはなんなの? ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・

    誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
  • WEBデザインが独学で身につく!WEBデザイナー必見の神サイト20選

    2023年2月17日 Webデザイナー1年生はもちろん、Web製作に携わるものなら絶対に知っておきたい神サイトを完全収録しました。 独学でWebデザインを勉強したい人、優秀な先駆者たちの知恵を吸収し飛躍したい人は要チェック。 WEBデザイナー必見の神サイト20コリスWebクリエイターボックスコムテブログかちびと.netバンクーバーのうぇぶ屋ホームページを作る人のネタ帳creive【クリーブ】BlackFlagDesignDevelopArchAteitexe アテークゼウェビメモWebparkNxWorldデザイナーのイラストノート株式会社LIGMdN Design InteractiveドットインストールProgateschooコリス コリス サイト制作に関する最新の情報をご紹介 サイト構築、WordPressのTipsを得られます。ただし、Webデザイナー1年制が、今からの更新情報を受

    WEBデザインが独学で身につく!WEBデザイナー必見の神サイト20選
  • ビジュアルデザインに必要な10の基本原則まとめ

    ビジュアルデザインを学ぶうえでもっとも基的なルール、原則10個を、現役ビジュアルデザイナーの José Torre が詳しく紹介しているので今回はご紹介します。 ずっと使える、デザインの基まとめました。【2020年改訂版】 ビジュアルデザインに必要な10の基原則まとめ #1 ポイント、ライン、シェイプ 点(英: Point)、線(英: Line)、形(英: Shape)は、どんなデザインにおいてもっとも基的な構成要素です。シンプルなアイコンから複雑なイラストまで、これらの要素を組み合わせることでどんなデザインでも作成できます。 幾何学(英: Geometry)としては、ポイントはX座標とY座標の組み合わせで、Z軸を追加することで3Dになりますが、今回は2次元デザインについて詳しく知りましょう。 ふたつのポイントをつなげると線になり、無数の点でできた線を組み合わせることで、どんな形で

    ビジュアルデザインに必要な10の基本原則まとめ
  • これでもう悩まない!2017年のデザイントレンド完全ガイド

    2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジーファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表!確認しておきたいポイントとは? 2017年のWebデザインはどうなる?

    これでもう悩まない!2017年のデザイントレンド完全ガイド
  • 2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ

    数多くのブログで2017年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、コンテンツファースト、レイアウトの多様化、フラットデザインやミニマリズムの進化、アニメーションの重要性、コミュニケーション・コラボレーション、AR/VR。 2017年のトレンドカラーは、フレッシュなグリーン。 参考: 2017年のトレンドカラー「グリーナリィ」と春のトレンドカラー10色 2017年、Webデザインのトレンド 2016年に人気が高かったインターフェイスのデザイントレンド 2017年、Adobe社のデザイン予測 2017年、Web制作業界全体の流れ 2017年、注目されているデザイナー・デベロッパーのツール 2017年、WebデザインUIにおけるトレンド 2017年、Webデザインのトレンド まずはWebデザインのトレンド

    2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
  • 7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法

    「ちょっと〇〇君!これワイヤーフレームそのままじゃない!」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手

    7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法
  • まめ知識│キャンプ場ドットコム:LOGOS

    新しくなったロゴスファミリー会員。 ロゴス製品を愛用されている皆様と「家族」のようにつながっていきたい。そんな思いから作られたのが「LOGOS FAMILY 会員」です。 会員登録(無料)をすることで、ポイントの利用、購入商品の管理、イベント参加への申込など、さまざまな特典を受けられます。また、 有料会員になることで、お買い物時に10%OFF、最新セレクションカタログの送付など、さらにお得な特典が受けられます。

    まめ知識│キャンプ場ドットコム:LOGOS
  • ウェブの UI デザイン・ビジュアルデザインの基礎を学ぶのに役立った本まとめ(2015年・冬) - おいちゃんと呼ばれています

    プライベートで新しいサイトを作りたいと思い、ここ最近はデザインに関するを集中して読んでいた。何冊か是非薦めたいものが見つかったので紹介する。年末年始のお休みのお供にどうだろうか。 今回紹介するの範囲 デザインといっても範囲が広いが、今回紹介するのは主に UI デザイン、ビジュアルデザインに関するもの。また主にウェブサイトのデザインに関するもの。 なお今回できるだけ新しいを挙げるようにした。ほとんど今年(2015年)発売されたものばかり。理論的なところはずっと前から変わっていないのかもしれないが、何せウェブデザインの流れがはやいので、説明がしっかりされていることに加えて、取り上げられているサンプルが新しいものか否かが読むときのテンションに大きく影響すると感じたため。 伝えたいことを整理しよう 今回、紹介するの順番について悩んだが、最初のだけは迷わなかった。 なるほどデザイン〈目で見

    ウェブの UI デザイン・ビジュアルデザインの基礎を学ぶのに役立った本まとめ(2015年・冬) - おいちゃんと呼ばれています
  • 日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました!(たぶん) | BtoBサービスキューレーション Boxil(ボクシル)まとめ!

    UI/UX」はもはやWEBデザインやアプリ開発において、無くてはならない存在となっています。実際にWEBサービスやアプリに触れて確認することも大事ですが、資料でまとめて勉強するのもありですよね! そこで今回は、日中の「UI/UX」に関する資料を気合いで全部集めてみました!(たぶん) それでは、早速みていきましょう! UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

    日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました!(たぶん) | BtoBサービスキューレーション Boxil(ボクシル)まとめ!
  • Download Free Vintage Ornaments, Illustrations And Borders

    85 vintage ornaments, 110 illustrations and 18 decorative borders, all vectorized from the best antique sources. Use these free vectors for any commercial work, no strings attached :-) DOWNLOAD FREE VECTOR PACK A selection of beautiful ornaments to embelish your vintage designs, picked from the Vectorian Essential Pack.  Carefully traced by hand from genuine typographic sources. Use these penmansh

  • UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ

    WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者/状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所

    UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ