デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）
webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること
Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合に
グリッドレイアウトでWebサイト構築したい時にはGrid calculator and generatorが手軽で良さそう
なかなか手軽で自分向きだったのでメモ。 グリッドレイアウトを意識したWebサイトの 構築の際に、希望の幅を入れれば、その 幅に応じたグリッドレイアウト用のcssが 生産されます。ファイルはフレームワークの Blueprint cssが生成されます。 手軽で自分好みだったのでメモがてらご紹介。いわゆるグリッドレイアウト用の計算機です。 幅を入れるだけで、作れるレイアウトを自動で計算してcssも出してくれます。cssはBlueprintベースのようですね。 この設定だけでＯＫ。 例えば、960pxで164～200pxくらいのカラムを10px以内の感覚で開けて並べたいという時の設定値だと3通りのレイアウトがあるようです。 条件の幅を広げれば、作れるグリッドの種類も増えます。 レイアウトが決まったら Preview & Download CSSをクリックすればプレビューとDLが可能です。 コンテン
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか？ 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6～8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
デザインの基礎力をワンランクアップしたい私（Webデザイナー）の注意書き
Webデザインは、紙の上のデザインと違うところも多いと思います。でも同じデザインですから、歴史ある DTP デザインから学ぶことはいっぱいあります。デザインの基礎の基礎、レイアウトについて、デザインするときに気をつけたい基礎の部分の注意書きです。 毎日インターネットを見ていると、素敵なデザインの Webサイトに出会います。ときにはひと目惚れしちゃうようなこともあります。そんなデザインにあったとき、どうして素敵なのかなーと考えるのも勉強のうち。そう思って素敵なデザインはストックしておいて、自分なりにそのデザインが素敵な理由を考えてたりします。 デザインの理由 どうしてそういうデザインをしたのか … デザインには理由があります。気まぐれに色を選んだり、要素を配置したりしないからです。なので自分のデザインの理由、どうしてそういう風にしたのかということを、口で説明できないとダメだと言われます。もち
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
サイトの「色」選びに役立つ20のツール
色選びに困ったときに助けてくれるウェブツールを20個紹介します。具体的な配色アイデアが紹介されているもの、選んだ色と関連する色が表示されるもの、画像から色を抽出するもの、という感じに分けてみました。 配色アイデア タイプ 投稿された配色アイデアが紹介されているサイトです。アイデアから編集できるサイトもあり、取っ付きやすいと思います。 Color Trends + Palettes :: COLOURlovers kuler ColoRotate: Colors come to life in 3D. Color Theory @ ColorJack カラーピッカータイプ 好きな色を選ぶと、その色と相性のよい色や関係性の高い色などが表示されます。 ウェブ配色ツール Ver2.0 Color Scheme Designer 3 [ws] Color Scheme Generator 2 Col
いまさら聞けない「Webブラウザ」超入門
Webブラウザって何をしているの？ ■クライアントからのリクエスト通信 Webサーバからデータを得るには「情報をください」という「リクエストメッセージ」を、Webサーバに送らなければなりません。Firefoxを使って＠ITにアクセスをする際に、Webブラウザ側からサーバに以下のデータを送ります。 GET / HTTP/1.1 Host: www.atmarkit.co.jp User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13 Accept: text/xml,application/xml,application/xhtml+xml,text/html; q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/05/design-process.html
華麗なヘッダーを持つ70サイト*ホームページを作る人のネタ帳
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Webサイトの独学場 デザイン、現場の作法。デザイン力を鍛える仕事術