まとめ-デザインシェアするTwitterGoogle+Pocketデザイン基礎のための記事やサイトHTMLとCSSの基本をサルでもわかるようにまとめてみようと思う。私自身デザインをしっかり学んだことはありません。そこで、私を含めノンデザイナーの方などが参考にできるような記事をまとめてみました。デザイン基礎のための記事やサイトまずはデザイン関係初心者が読むべき記事をまとめた記事のご紹介です。これらを読むことで、デザインの基礎の全体像を把握できるようにしましょう。HTMLとCSSの基本をサルでもわかるようにまとめてみようと思う。HTMLとCSSの基本を簡潔にまとめてある記事の紹介です。HTMLやCSSの内容を理解していない方や復習したい方にオススメの記事です。この記事でHTMLやCSSのおおまかな内容の理解をできると思います。どの記事やサイトから見ればいいか分からないという方にオススメです。www.ituore.com読むだけでWebデザインを独学できる!絶対押さえておくべきサイト10選HTMLやCSS、レスポンシブデザインなどのWebデザインに関することを学びたいとき、参考にしたいサイトが紹介されています。以下のような10記事のリンクが紹介されていて、ウェブデザインを初めて知る方はとても参考になると思います。ウェブデザインの全体像が分かる記事が3記事HTML・CSS・JavaScriptがわかる記事が3記事スマホサイトやレスポンシブデザインがわかる記事が2記事ギャラリーサイトが2記事smaroomch.netひとりでWeb制作できた!「知識0から学ぶ」すごいスライドやサイト27この記事は、はてなブックマークの数が尋常じゃないんです・・・ウェブ制作の全体を学びたいときに見るべき記事です。以下の27の事柄についてのリンクが数多く紹介されています。自分に必要なものをブックマークなどしておくといいでしょう。絶対に見ておきたいデザインスキルアップできる記事12選フォントや配色、レイアウトなど様々な種類の記事が12個も紹介されています。内容が盛りだくさん過ぎて、どれから読もうか迷うかもしれませんが、1つずつ見ていきましょう。全体をなんとなく把握した後に細かい部分を学んで、デザインのポイントを掴んでいくといいかもしれません。〜ボックスモデル編〜CSSの基本のボックスモデルについて詳しく紹介されています。ヌーラボデザイン基礎のための動画サイトYouTubeなどの効果もあってか動画配信サービスが身近なものになりました。ここでは、ウェブデザインを勉強することのできる動画配信サービスを紹介します。文章を読めるだけでなく、映像や音声を用いて学習できるため、初心者にオススメです。サイトによってはデザインだけでなく、プログラミング言語も学べたりします。動画でウェブデザインを学んでみたいという方にオススメです。動画であるため、全部観ることは時間がかかるかもしれません。学ぶ順序がしっかりと示されているため、デザインの勉強がしやすいと思います。以下のようなことが紹介されています。HTMLについて8個の動画CSSについて9個の動画Illustratorについて18個の動画Photoshopについて19個の動画まあ暇な時や今まで学んだことを復讐するためなどに少しずつ見ていくと良いかもしれません。web-creators-tips.comドットインストールドットインストールはHTMLやCSSだけではなく、様々なプログラミング言語を学ぶことが出来るサービスです。動画でHTMLやCSSを学びたい場合にオススメです。はてなブックマークの数から分かるようにとても人気があり、定評の有るサービスです。実際に手を動かしながら学びたいならCODEPREPなどもオススメです。dotinstall.comCODEPREPJavaScript/HTML/CSSを学習するためのサービスの1つです。オンライン上でゲーム感覚で学べる上に、コード入力をサポートしてくれるので便利です。実践的な学習をしながら、コードを打ち込みたい場合にオススメです。codeprep.jpProgateCODEPREPやドットインストールと同じですが、HTML/CSS/JavaScriptを学ぶことができます。CODEPREPが合わなかった場合やCODEPREPをやり終えた後に復習として利用するのもいいでしょう。prog-8.comレイアウト基礎レイアウトの配置などを学びたいときに参考にするべき良記事の紹介です。Webデザインの基本が身につく!ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめグリッドレイアウトで要素を配置するとき、どのようにすればいいのかを学ぶことができます。文字の配置の基礎を学びたいときやフォントに関するテクニックが紹介されている記事の紹介です。ノンデザイナー向けガイド!文字を美しく並べる3つの基本テクニック文字を配置するとき、どこに配置すればいいか悩むものです。そこで、どのように文字を並べたら綺麗になるのかを紹介している記事です。文字の配置に悩んだときはこの記事を参考にするといいと思います。photoshopvip.netデザイン初心者が覚えておきたい、文字フォントの基礎テクニック26個まとめフォントの基礎テクニックが26個も紹介されています。26個もあるため、私自身覚えられていません。そのため、何回も記事を見たりして少しずつ覚えて、身につけていくといいでしょう。photoshopvip.netUIの基礎ユーザーインターフェースを学びたいときに読むべき記事を紹介します。UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめUI(ユーザーインターフェース)を学ぶときに是非読んで欲しいです。当たり前のことですが、ユーザーインターフェースってかなり重要だと思います。私自身スマホアプリを使っているときに、なんでこの操作ができないのかとかどうすれば自分のしたい行動ができるのかすぐに分からないときがあります。そのときにもっと分かりやすいユーザーインターフェースだったらいいのにと思うことは度々あります。そこで、自分がユーザーインターフェースを考えて実装するときは利用者が困らないようなユーザーインターフェースを実装したいものです。ユーザーインターフェースに詳しくない人は以下の記事でまとめられているスライドなどを読むといいでしょう。写真を加工したり、配置したりするときのことが紹介された記事の紹介です。わたしのデザインセオリー(写真マスク編)写真をデザインするときは様々な手法などがあるとは思います。その中の一つとして参考にしたい記事です。画像付きで詳しくかつ分かりやすくまとめられているためオススメです。in.spicagraph.comテクニックまとめ様々なテクニックが紹介された記事の紹介です。デザインの基礎が分かってきたときなどステップアップとして読むと良いかもしれません。コンテンツを盛り上げる、逆引きデザインテクニック以下のようなことを行いたいときに参考にしたい記事です。視線を安定させるヒエラルキーを明確にする写真に関するテクニックや記事を読みやすくするテクニックなどがまとめられていて、とても参考になります。commte.netWebデザインの素材まとめ記事アイコンやテンプレートなどの素材を集めたいときに見たい記事の紹介です。WebデザインのアイコンやHTML・WordPressの素材まとめ記事9選オススメのHTMLテンプレート・WordPressテンプレート・アイコンなどなど多くの素材が紹介されている記事が紹介してあります。www.mataro1.comまとめ今回は様々な記事を紹介しましたが、良い記事を見つけた場合は追加していこうと思います。20:49スポンサーリンクシェアするTwitterGoogle+Pocketもしこの記事が気に入って頂けましたなら、シェアして頂けるとすごく嬉しいです。はてなブログPro家電やWeb情報,アプリ開発大好き人間です。オススメの製品やアプリなどを紹介しています。お問い合わせ先mataro.phone[@]gmail.com[@]を@に変更し、メールをお送りください。(1)月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。