Web Design and Web Development : うやむやだったHTML5の文書論理構造をきちんと考えてみる | mnemoniqs’log.
iPhoneやandroidの案件ばっかりの今日この頃。 HTML5を使用することが多くなってきましたが、文書論理構造となると少しうやむやなところがありました。 <header>や<footer>などは特に違和感なく使えますが、<section>や<article>になると少し自信がなかったりするので、改めて見直してみます。 HTML5 Element Flowchart 『HTML5 文書論理構造』で探してみると、「HTML5 Element Flowchart 」なる画像が公開されていました。これがすごくわかりやすい。 HTML5で使用するタグを、消去法でマークアップしてます。 ではさっそくスタート。 1. それは、主要なナビゲーションブロックですか？ Yes <nav> で囲む グローバルナビゲーションやフッターナビゲーションなどに使用。 No 2へ 2. それは、自分自身だ
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
Web Design and Web Development : Dreamweaverで高速かつ快適な作業のために、やっておきたい5つのこと | mnemoniqs’log.
仕事で使ってるDreamweaver環境設定や、効率を上げる方法を下記にまとめておきます。 目次 サイトの定義と管理を必ずやる ソースコードを見やすくカスタマイズ 便利なショートカットキーをつかう CSSコードヒントのカスタマイズ スニペットを追加してみる サイトの定義と管理を必ずやる 作業用のフォルダを決めて、まずサイトの定義をすることからDreamweaverのコーディングは始まります。 コレをしないで進めると、階層の全体像や相対パスがぼんやりしたままになり、とても危険。 超簡単な作業なので、やらない手はありません。 ローカルにあるフォルダを定義 [サイト] → [新規サイト] → [ローカル情報] 「サイト名」にプロジェクト名、「ローカルルートフォルダ」に作業用フォルダのパスを指定するだけでサイト定義は完了です。 設定したサイトは、[サイト] → [サイトの管理]の一覧から選択
Sublime Text2ってエディタがすごくイイ。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
フロントエンドがやっておかなきゃいけない、iPhone(スマホ)向けサイトを軽量化･高速化するための必須項目をメモ。 | Mnemoniqs Web Designer Blog
Webサイトの待ち時間の80％はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
Webデザイナーとして制作会社に勤めて5年、もっと色々やっときゃよかったなぁと思うこと | Mnemoniqs Web Designer Blog
今の制作会社に勤めて5年になりました。Web系の専門学校からアルバイトとして入りそのまま正社員となり、右も左もわからないまま、なんとかWebデザイナーとして突っ走ってきました。 そんな思い出深いこの会社を今年の6月で退社することとなりまして、昔を振り返りながら、もっと早くからやっておけばよかったと思うことをいくつか。 もっと早くブログを始めてればよかった まずはこれです。既に書いている人、書き始めた人は必ずコレ言いますけどw ほんとにもっと早く始めていれば、と思います。「Webの知識が浅いのに、ブログ記事なんか書けない、書いたら恥ずかしい」なんて考えていたんでしょうか、あの時の僕は。 ブログを書くということのメリットをあげると、 ・Webに対する意識が深まる ・いろんな人と繋がる ・他の人のブログをしっかり見るようになる(これが結構デカい) ・過去の自分と今の自分を比較できる判
制作でDreamweaverを使うときに便利な、ワークスペースごとの基本機能のまとめ | Mnemoniqs Web Designer Blog
制作でDreamweaverを使うときに、知っておきたい基本機能をワークスペースの各要素ごとにまとめてみました。ほんと基本的なことばっかりですが、意外と知らないまま使ってたっていう同僚もいたので。あんまり活用してないところがあれば、確認しておくのもいいかと思います。 目次 ワークスペースのレイアウト ファイルパネル ドキュメントウィンドウ コーディングツールバー ステータスバー 挿入パネル 検索および置換 プロパティインスペクター ワークスペースのレイアウト 僕のDreamweaverCS3はこんなワークスペースのレイアウトとなっております。結果パネルだけポップアップ。 (クリックで拡大) [スタイルレタリングツールバー]と[標準ツールバー]はほとんど使わないので非表示にしています。[挿入パネル]は必要なときだけオープン。 レイアウトは人ぞれぞれなので一番使いやすいかたちで。 ファイルパ
AN HTTP Server
「サイトルート相対パス」とは、サイトのルートフォルダからドキュメントまでのパスを指定のことです。 例えば <img src="http://mnemoniqs.com/images/top.jpg" alt="logo"> の画像を表示する場合 <img src="/images/top.jpg" alt="logo"> とimgタグに指定します。「ドキュメントルートからの絶対パス」って呼び方もあります。 制作状況によっては、Web上のサーバーにあがっているものをローカルでいじらなきゃいけないときがあります。ちょいと修正したいだけなのに「サイトルート相対パス」と同じ環境をローカルに作るのが面倒！なんてことがちょくちょくあったので、良い方法はないかとプログラマの方に聞いてみたところ、｢AN HTTP Server｣を使う簡単な方法を教えていただきました。 ｢AN HTTP Server｣の導
Webデザイナーがデザイン提出時に添える｢デザイン趣意書｣について、少し掘り下げてみた | Mnemoniqs Web Designer Blog
ここでいう「デザイン趣意書」はそんな大それたものではなく、テキストエディタにちょいとデザインの要点を箇条書きした程度のものです。 完成したデザインをディレクターに提出するときや、ディレクターがクライアントや代理店にデザインを確認するときに使うアレです。これが改めて大事だなって思ったので書き留めておきます。 「デザイン趣意書」に書くこと この趣意書の一番の目的は「なぜこのデザインにしたか」を、ディレクターやクライアントにわかりやすく伝えること。Webに関して素人のクライアントも多くいるので、どんな細かいディティールよりも、はっきりとしたわかりやすい理由のほうが納得してもらえることが多いです。 趣意書に含めている内容としては、 ・なぜこのデザインにしたのか (サイトの目的やターゲットユーザーなどから) ・どんなところを工夫したのか (デザインの付加価値) ・ユーザーに対してどんな効果を狙
HTML5の｢コンテンツ・モデル｣と｢カテゴリー｣を理解してマークアップするためのまとめ | Mnemoniqs Web Designer Blog
PCサイトのコーディングではまだまだHTML4で行うことも多いですが、最近ではスマートフォンの案件も増え、HTML5でマークアップする機会が多くなってきました。 先日の記事、「うやむやにしていたHTML5の文書論理構造をきちんと考えてみる」では基本的な文書論理構造のフローチャートを載せました。今回はHTML5をマークアップするうえで無視できない『コンテンツ・モデル』について、自分の理解を深める意味でも、改めてまとめてみようかと思います。 目次 『コンテンツ・モデル』を理解する必要はあるの？ 『コンテンツ・モデル』って一体なに？ 『コンテンツ・モデル』の主要カテゴリー 注意！「カテゴリー」＝『コンテンツ・モデル』ではない 『コンテンツ・モデル』をもとにしたタグの配置ルール トランスペアレント・コンテンツとは？ まとめ 『コンテンツ・モデル』を理解する必要はあるの？ HTML4でマークアップし
｢デキるWebディレクター｣と｢デキないWebディレクター｣を12項目で比較してみた | Mnemoniqs Web Designer Blog
制作会社の体制にもよると思いますが、大体の制作現場はWebディレクターが案件を管理して、Webデザイナーやプログラマーが作業する、というかたちだと思います。 制作会社勤めのWebデザイナーにとっては、Webディレクターと上手く仕事できるかどうかが、かなりミソと言っても過言ではないのでは。人間的に合う・合わないっていう相性の問題もあるとは思いますが、その中でも個人的にいいなぁと思うWebディレクターと、いかんなぁと思うWebディレクターの違いを書いてみようかと思います。 デキる デキない 1 ミーティングでは、あらかじめ要点を簡潔にまとめてあって、進行が非常にスムーズ。仕様書も作業者と意見を交わしながら進めていける。 ミーティングでの話がとにかく長く、仕様書を全部読みたがるので、どこが重要な部分なのかわからない。基本的に自分ひとりでしゃべっている。 2 質問がしやすい・相談がしやすいなど、
Webサイトリンク集で素敵なサイトを見ながら考えたい『デザインの理由』 | Mnemoniqs Web Designer Blog
WEBデザイナーをやっていると、いくつものWEBサイトリンク集を毎朝チェックしている人も多いと思います。インスピレーションのためだったり、その時のトレンドを知るためだったりとなにかと便利なものです。 僕も20才のときにWEBデザインの専門学校に入ってから、毎日飽きることもなく、国内･海外のさまざまなWEBサイトリンク集を眺め続けてきました。 当時はデザインのデの字もわからない初心者でしたので、とにかく少しでも早く素敵なサイトデザインを作りたいという気持ちが強く、そのためには、すでに公開されている素敵なサイトの技やテイストを盗むことが近道だと考えていました。 フォントのあしらい方、余白の取り方、色使い、全体のレイアウトなどをアイデアの引き出しに押し込み、トレンドが変わるたびに自分ポートフォリオサイトをリニューアルしたりもしました。 実際その方法は間違っていたとは思いませんし、そのおかげで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mnemoniqs’log.
仕事中に聴きたいメロディアスなエレクトロニカ その2 [インスト] | Mnemoniqs Web Designer Blog