Web制作初心者に役立つ良質なツールやコンテンツ達を出し惜しみせず全部紹介
ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、Webから与えてもらった知識や情報を還元したいと思っていた。 こうしてブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。 このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。 一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。 目次 とにかく１ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な
マテリアルデザイン(Material Design)フレームワークのリンク集 - webhack / ウェブ技術が好き
2015-07-08 マテリアルデザイン(Material Design)フレームワークのリンク集 CSS ウェブデザイン マテリアルデザイン レスポンシブデザイン マテリアルデザインのガイドラインを出していたGoogleから公式のフレームワークも登場するなど、今年に入ってマテリアルデザインフレームワークが充実してきました。マテリアルデザインが盛り上がる背景として、ウェブページとアプリの両方で使いやすい（特にアプリ）、Googleが推奨している、評判が良いなどの理由があります。用途に合わせてフレームワークを導入しないと半年後に作り直しといった事になりかねますので、この記事は技術の選択・検討漏れを防ぐ事を目的にマテリアルデザイン(Material Design)フレームワークをリンク集形式でまとめます。このページは定期的に更新する予定です。 Material Design Lite 公式
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
ちゃんとした C# プログラムを書けるようになる実践的な方法～ Visual Studio を使った 高品質・低コスト・保守性の高い開発慎一 古賀
ButtonMaker webボタン素材 自動生成サイト - 無料
このページはホームページ制作に使えるボタン素材を生成するサイトです。 ご希望の項目を設定し、右上の「create」ボタンをクリックするだけで簡単にボタンを作れます。 ※印の付いた項目は設定必須で、その他の項目は必要に応じて設定してください。 各項目の「カラー」の欄は入力欄をクリックするとカラーピッカーが表示されますので、 ご希望の色をクリックすると自動で入力できます。 背景色の「方向」はグラデーションにする際の１から２への色の向きです。 テキストの位置２は自由に指定したい場合に設定すると、 位置１の指定を無視して、位置２で指定した位置にテキストを表示します。
【UI/UX改善】CVRを向上させるスマホサイトのポイント10選 | LISKUL
「PCやサイトのスマホ版を作ったけど、思うように成果が上がらない・・・」「どうすれば成果の上がるスマートフォンサイトを作れるのだろうか・・・」とお悩みのweb担当者の皆様へ。 その答えは、「UI/UXの改善」にあります。 多くの企業がスマホサイトで成功していない原因としてありがちなのが「PCサイトを安易にスマホサイト風に変換しているだけ」というパターンです。 そのため、スマホとPCの違いを考慮して、スマートフォンでのユーザー行動を意識したUI/UXに改善するだけでも、CVRは簡単かつ速攻でアップするんです！ そこで、今回はCVRを向上させるためのスマホサイトのUI/UXを改善するためのチェックポイントをご紹介いたします。ぜひ皆様のWebサイトの改善にお役立てください！ サイトUIを改善するための分析手法を知りたい方は、こちらの資料を手元に置いてみてみてください。 ※本記事は2014年7月8
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
CSSで要素を横並びにする方法まとめ | HALAWATA.NET
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
画像素材 ゲッティ イメージズ getty images
シンプルな定額使用プランで、ゲッティイメージズの優れた素材を存分にご活用ください。数百万点もの高品質な写真、映像、音楽の素材をご用意しています。
入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善
入力フォーム（エントリーフォーム）を入力していて、イライラする……と感じたことありませんか。ありますよね。自社サイトの入力フォームでユーザーにイライラを与えていませんか。 小さなイライラが積み重なった先にあるのは、エントリーフォームからの離脱です。ユーザーが一度エントリーフォームから離脱してしまったら、もう戻ってきてはくれないと覚悟しておくべきです。入力を完了してもらいエントリーフォームの「入力完了率※」を上げるためにはどうしたらよいのでしょうか。 そこで、この記事ではEFO（エントリーフォームを最適化）を行い離脱要因を減らして、入力完了率を上げる15カ条を紹介します。 少し手間をかければ劇的に入力完了率アップが期待できるはずの、「惜しい」エントリーフォームを各条1つずつ取り上げて、頼まれてもいないのに、勝手にそのフォームを分析して作った改善案とともに、ポイントとなるエントリーフォーム改善
HTML5時代のWebデザイナー これからの生きる道 - HTML5 Conference 2013 in Gifu
HTML5 Conference 2013 in Gifuのデザイントラックで行なわれたセッションスライド。 アプリデザインについての講演。
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.2 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
CMS導入前にしておきたい質問
今注目されている Micro CMS 従来は Joomla, WordPress, Drupal, Movable Type 辺りから制作者の肌に合うツールを選ぶ場合がありました。これらは今でも十分に使える高機能 CMS ですが、機能が多過ぎることから、メンテナンス、運営、ワークフローをしっかり設計していないと、複雑で扱い難いものになることがあります。無料から使える小中規模 CMS は出そろった感がありますが、ここ 1, 2 年ほど新しい CMS を幾つか見かけるようになりました。 Pico : 静的ファイルを管理する CMS Dunked : ポートフォリオに特化した CMS Koken : こちらもクリエイティブ向け CMS Leeflets : 1ページサイトを手軽につくる CMS Ghost : Markdown で書けるブログツール Dropplets : こちらも Markdo
続・レスポンシブWebデザインとかアダプティブWebデザインとか
2013年6月19日 著 渡辺さんが、レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみたのなかで僕の記事に言及してくださったので、改めて自分の解釈を覚え書きしておきます。 身もふたもないことを先に言っておくと、どうもこの「レスポンシブ」やら「アダプティブ」という言葉が最近、好きではありません。意味的にも発音的にも紛らわしく、厄介なことこの上ない。これらをそのまま日本語圏で（カタカナ表記にしろ英語表記にしろ）使うことについては、どちらかというと反対の立場。渡辺さんの記事で説明されているように、「アダプティブ」と言ってもそれがコンテンツの適応性を指すのか、それとも表示上の適応性のみを指すのか、文脈次第で変わるのも好きになれない理由。 閑話休題。レスポンシブWebデザインにしろアダプティブWebデザインにしろ、Webコンテンツをマルチデバイスに対応させるうえでの考え方であることは
レスポンシブWebデザインとかアダプティブWebデザインとか
2013年5月31日 著 （ [2013-05-31 追記] Google+ のほうでツッコミいただきましたが、引き合いに出している記事における話が「Webの」デザインなのか、もっと広い意味でのデザインなのか、がやや不明瞭であるにもかかわらず、自分のほうで勝手に前者＝Webデザインの話として一方的に解釈のうえ記事を書いてしまいました。その点は自分の読解力不足であり、反省すべくこのまま恥を晒しておきます。） 社内でもレスポンシブからアダプティブへ - 必要な情報を、必要なときに、必要としている人へ | Digital experience Universityという記事が話題になったので。自分がこの記事で気になったのは、センサーを搭載したデバイスを用いてパーソナライズされた情報を届ける「アダプティブデザイン」というコンセプトという出だし。何も知らない読み手であれば、アダプティブWebデザイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
Flatis
https://repopgl.org/