tihataのブックマーク - はてなブックマーク

[webデザイン]規則性と不規則性を使いこなす

見やすいレイアウトには規則性がある webデザインに限らず、見やすくてわかりやすいデザインをするためにはある原則があります。デザインの4つの基本原則等と言われているようで、これを踏まえていればしっかりとしたデザイン＝設計が出来るというわけです。デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則タイポグラフィが苦手な人におすすめしたい私のやり方 | ウープスデザインブログ (デザイナーまめこ) 上記のような記事が参考になります。また、デザインという言葉の普通の印象からは外れると思いますが、マーチャンダイジングにおいても関連した話題があったので紹介しておきます。売場の陳列を考える – NAVER まとめ規則性を用いてデザインするこうしたことからデザインにおける規則性を掴むことができれば、ある程度法則に則って作るだけでも美しかったり、わかりやすいデザイ

tihata 2013/05/08

デザインに限らず物事をおさめる上での「守破離」的な考え方ですね。すごい大切だと思います。最近よく考えてることのひとつでもある。

web
design

リンク

[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方

http://www.hamashun.com/ で、お会いしたときにここぞとばかりに私が気にしているコーディングのしかたなどを聞いてもらったりしたのですが、いくつか気になるコメントをもらえたのでじっくり考えてみました。今まで考えていた根拠の薄いコーディングルール私は普段からかなり文書構造に気をつけてコーディングを行っていますが、仕様の中で理解できない部分についてはわりと独自の解釈も用いています。そのひとつに、「入れ子の同じ階層にブロック要素とインライン要素を置かない」というものがありました。入れ子の同じ階層にブロック要素とインライン要素を置かない具体的に説明すると、body要素等のブロック要素の直下にdiv要素等が置かれていた場合、それの外側の同じ階層状にspan要素等を置かないという事です。 <body> <div id="container"> <header id="top

tihata 2013/02/27

なるほどー分かりやすかったー！

HTML5

リンク

[HTML5 入門]実制作で迷わない為のマークアップ例：会話文

文書構造を意識したマークアップ例今回から始める不定期連載です。HTMLのコーディングのやり方はリファレンスサイト等で例文を用いて行われることが多いですが、どうも抽象的だったり、実際の運用に即していない印象のものが多く見られるように感じています。仕様に関する解説やコードの書き方も、遠まわしだったり、「だから結局どう書けばいいの？」という感は拭えません。また、ドキュメント自体が書かれた地域の文化を基準にしており、我々日本のweb制作現場の実際にそぐわない場合もありますよね。こういったことについて、一つ一つ実際の事例や具体的な使われ方を挙げながらHTML、CSSのコーディングについて解説したいと思います。また、この連載にはブログの記事と同じく私個人のHTML5のマークアップに対する考え方が強く織り交ぜられることと思います。もし見解の相違などありましたらご意見頂きたいと考えています。シン

tihata 2013/02/06

分かり易いなーセマンティックやわー

HTML5

リンク

知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ

調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。

tihata 2013/01/24

感覚として知ってたけどこういう仕様でなってたのかー！勉強になりました！

リンク

あなたのブックマークをwebの肥やしにしない為の実用タグ付け規則考

なぜブックマークするのか皆さんもwebで読んだり興味を持ったwebページを、自分なりの理由や線引きの元にブックマークしますよね。でもそれを後で活用できている人ってどれくらいいるのでしょう。せっかく一瞬とは言え作業をしているのですから、何かの役に立てないと意味がないですよね。まず、どういった理由でブクマするのか、ちょっと考えてみます。ググっても見つからない時の為の保険大抵の場合、記事のタイトルや概要を覚えておけば、本当はブクマする必要すらないのかもしれません。webcre8がブクマし忘れて後々困った！と思うのはやっぱり英語の記事やチュートリアル、素材を探すときですかね。単語だけだと色々引っかかって見つかりません…。後で読み直す為しっかり読んでないけどあとでもうちょっとちゃんと読みたい、と言うようなものです。結局読み返さずじまいの記事も多いと思いますけど…。まあそれはさほど必要のな

tihata 2012/10/29

なるほどなー自分ルールを明確にしてかないと確かに一生見ないブクマとかあるからねー

リンク

[HTML5 入門]実用を意識した最小単位からの文書構造チュートリアル

文書構造って難しいですよねコーディングしていたら迷う事ってたくさんありますよね。「これは見出しなのかな」「この段落はどこまで段落なんだろう」「検索バーはどのタグで囲めばいいの？」等など、判断に詰まることはいくらでもあります。そしてその判断の迷路を抜け出た後も、ふと「このマークアップで本当に合ってんのかな」と再び迷いに陥ることも。エレメントの役割とタグの用途の正確な理解コーディングしているときに何故迷うか。これは、それぞれのパーツがそのサイト内にどういう役割で置かれているかをはっきりと定義できていない各タグの用途を理解できていないこのいずれか、または両方が出来ていないから起きる問題だと思います。エレメントの役割とタグの用途、この二つがはっきりしていればコーディングに迷う事はありません。…まあ(他にも納得の行かない組織ルールとかSEOを考慮した記述等があって)それは理想の話なんです

tihata 2012/10/04

うおー！すげー！ながいーｗｗｗ帰ってからじっくりよむデス！

HTML5

リンク

[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ

調べる。備忘録としてwebやデザインについて調べたり新しく知ったことなどを書き残していくカテゴリです。 HTML5入門シリーズ折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に「間違っている」という指

tihata 2012/09/12

ちゃんと読んで理解するー！

リンク

[webサービス]2012年2月リリースされた(話題になった)webコンテンツまとめ

このコンテンツはと言う事で毎月書いていますが、一応スタンスとして規模の大小に関わらず、webサービス、アプリ等を紹介する海外のサービスでも日本語で直感的に使えるものは普通に紹介海外のサービスで他言語が必要なものはおまけで紹介キャンペーン等のコンテンツもおまけで紹介モバイルデバイスのみでしか使えないアプリ等は除外と言った感じで進めてきました。ですが段々海外の面白そうなサービスや、プロモーションの面白いコンテンツが増えてきている傾向にあり、おまけのウェイトがかなり重くなってきそうなので、改めて全てを一緒に紹介して行く形にしようかと考えてます。国内のサービスしか見たくない人はちょっと申し訳ないですが、雑多な感じで集めていきます★ お暇なときにでもさらっと気になるサービスを探されてはいかがでしょうか？ 2012年2月のwebサービス総括と言う訳でサービスです。2月はもうバレンタ

tihata 2012/05/04

introduction!

リンク

[HTML5]文を書くのも上手くなる！セクショニングを理解する

webcre8はまだまだ不勉強なところもありますが、HTML5の学習を進めるとともに、このセマンティックWebについて深く興味を持っています。それを通じて学んだことや考えたことはこのブログに残していこうと思います。ご指摘などありましたらブログのコメント欄や@webcre8の方にご連絡頂ければと思います！セクショニングの立ち位置 HTML5にはセクショニングと言う概念が存在します。文書構造を明確にする考え方のことで、要素としてはセクショニング・コンテンツやヘッディング・コンテンツに分類されている要素がそのマークアップ上の役割を担っており、これらの要素を用いてセクショニングすることで、文書は正しいアウトラインを得ます。これについては過去記事の[HTML5]アウトラインで迷わない！ sectionと見出しについてをお読み頂ければと思います。ある程度勉強したけどsectionとかarticleの

tihata 2012/03/29

セマンティックWebの考え方はすごく好き。(一度もちゃんと作った事無いけど…orz)正しい文章構造に正しいマークアップ。そして装飾。コレが正しく評価される。（検索順位が高い）勉強になるです!!

HTML5
SEO

リンク

デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素

元々これはwebcre8が人にデザインを教えるとき、「細部まで考えて考えて決定するからこそデザイナなんだよ」と言う事を伝えたいが為に書こうと思ったものです。熟練者の方も、読んで同様に思われましたら是非教育に使ってみてくださいｗはじめに：デザインとは webcre8は「webデザイン」の門扉を叩いてから3年程。まだまだこの世界ではwebの先輩方から学ばせてもらうばかりですが、曲がりなりにも「デザイン」というもの自体とは長く向き合ってきたつもりです。 webcre8の考えでは、例えばゲームのキャラクタの服の飾りであろうと、安売りの札の配色であろうと、webデザインのレイアウトであろうと、とにかく「デザイン」という作業は「なぜそれをそうするのか」という思考の戦いであると、今はそうなっています。だから今webcre8自身が向き合っているのはたまたまwebデザインですが、このこと自体は建築デザイ

tihata 2012/02/29

design
web

リンク

[デザイン]グラフィックパターンや柄、テキスタイル等の名前まとめ

名前って大事パターンファイルってwebで沢山いいのを見かけますよね。商用可のものも割と多いのでお世話になってる人も多いと思います。webcre8は形にこだわるので整理するときちゃんとしたファイル名をつけて保存したかったりするんですが、これって単にストライプでいいのかな…？ポルカドットってつまり、どこからどこまでがポルカドットなんだ…？プレイドとチェックって何が違うの…？ということを考えだすともう止まれないんですよねｗというわけで今回はデザインの柄や模様の例、ネクタイやシャツのサイトの用語集やファブリックの柄やテキスタイル、果ては迷彩のパターンの例等、およそパターンファイルで使われそうな模様の写真やデザイン例、名称や由来を集めたページをまとめてみました。各サイトの画像はスクショだったりわかりやすいところを切り抜いたりです★ ファッション、用語全般アパレル、ファッション全般の用語

tihata 2012/02/21

千鳥格子にそんなかっこいい名前がついてたんですねぇ。勉強にﾅﾙです‼

design

リンク

[HTML]素朴な疑問：空白の行は内容か装飾か ― 文章とHTML

久しぶりのエントリになってしまいました＞＜また元気に書いていきます★ webcre8は正直なところHTMLを学びだして大した年月を重ねているわけではありませんが、自分なりに密度の濃い学習に励んできたつもりはあります。そしてその中ではとりあえず理解が及ばなかったり、ソースが英語で、「自分より詳しい人がこの解釈で間違いないと言っているから」「リファレンスに書いてあるから」そういうものだと受け入れてしまっているセオリー的な知識や情報も多々あります。でも「これってそう言われてるけど本当にそうなのかな」って考えることも必要ですよね。 HTMLは内容、意味 CSSは表現、装飾これは大前提ですよね多分。pは段落。h1、h2、h3等が見出し。sectionは段落から始まるコンテンツの塊(セクション)。blockquoteは引用。このように、HTML内に書かれたテキストや画像、コンテンツ等の文書の内容

tihata 2012/02/18

そこまで深く考えたことなかったなー駄目なものは駄目と思ってた。目からうろこでした！

css
html

リンク

[フォント] #LOVEFONT まとめました。継続募集します！

まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる情報まとめのカテゴリです。先週の記事で#LOVEFONTと言うハッシュタグをつけた記事を募ってみたのですが、声をかけさせて頂いたお知り合いの方達以外にも絡みのない方々からも続々と好きなフォントへのラブコール合戦の参加があり、チラホラハッシュタグ検索でお見かけさせて頂きました。書くのにも結構手間なのにも関わらず、その数なんと18ブログ!! 初めて知ったフォント、知ってはいたけど手が出ずにいたフォント、インストールしているのに殆どセレクトしたことのないフォント。使っているのにも関わらず良さに気付けずにいたフォント。 webcre8自身そんなにフォントに詳しいわけでもなく、使いこなせているなんて露ほども思えませんが、皆さんがこうして楽しんで書いたり読んだりしてくれたこと、実に嬉しく思います★ とは言えここまで来たら、こち

tihata 2012/01/25

企画のっからせてもらいました。楽しかった！

font

リンク

[Twitter]Twitterを拡張する関連サービス5選＋超シンプル情報収集法！

自分のTwitter連携サービスを眺めてて「やっぱこれは必須だなー」と思ったもの5選と、retime.meを使った情報収集法の紹介です(まあそのまんまですけどねｗ)。 Twitter、楽しいですよねー。情報収集ツールであり、コミュニケーションツールでもある最強のサービスだと思ってます。もしこのブログを読んでいる方でアカウントを持ってない人は早速登録してきましょう★(ついでに@webcre8をフォローしてもらえると嬉しいですねーｗ) Twitterの使い方はかなり人それぞれなので、ぶっちゃけ誰もがこれらを必須だ、と思うとは限りませんけど、ここに挙げたものはデフォルトでTwitterについててもいいんじゃないかと言うような機能(難しいでしょうが)を備えたものばかりです。それぞれがTwitterの重要な各機能を補完する役割を持っていると思います。 http://twilog.org/ Twil