サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
mnemoniqs.com
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
Advent Calendarの#LOVEFONTに参加させて頂きました。2日目でございます。 自分の好きなフォントを紹介するということなので、「はんなり明朝」をば。 デザイナーにつきまとう明朝の影 今までデザインをしていた中で、よくこんなことがありました。 「ゴシックがハマらないな。冒険して明朝を使ってみるか。・・・うん、ゴシックでいいか」 「このデザインには明朝が合いそうだ。どの明朝を使おうか。おふぅ、ないな。明朝はないな」 「MSぅ・・ヒラギノぉ・・・小塚ぁ・・・教科書た・・・・ウガアァァ！！」 「勘亭流www龍門石碑体www」 ってな感じで、明朝には何度も悩まされてまして。 超日本風のデザインにでさえ、なんとなく既存の明朝だとハマらないことが多いんです。 しかも！日本語明朝は無料で商用利用が極端に少ない！ そんなとき、はんなり明朝と出逢いました。 Typing Art
｢Topeconhero’s｣様が無料で提供する数々の素材サイトのご紹介です。 僕も制作でよくお世話になっておりまして、特にシルエットと枠素材は、どれもツボを押さえていて非常に使いやすい。Webデザイナーなら是非知っておきたい素材サイトです。 商用フリーで使える影絵素材サイト シルエットデザイン デザイン枠、飾り罫素材専門サイト「フレームデザイン」 フリーWEB素材サイト「DOTS DESIGN(ドッツ・デザイン)」 花・植物系ベクター素材集 flode デザインFlash待受画像ギャラリー! Design Flash Wall Gallery!
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
Webサイトの待ち時間の80％はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
今の制作会社に勤めて5年になりました。Web系の専門学校からアルバイトとして入りそのまま正社員となり、右も左もわからないまま、なんとかWebデザイナーとして突っ走ってきました。 そんな思い出深いこの会社を今年の6月で退社することとなりまして、昔を振り返りながら、もっと早くからやっておけばよかったと思うことをいくつか。 もっと早くブログを始めてればよかった まずはこれです。既に書いている人、書き始めた人は必ずコレ言いますけどw ほんとにもっと早く始めていれば、と思います。「Webの知識が浅いのに、ブログ記事なんか書けない、書いたら恥ずかしい」なんて考えていたんでしょうか、あの時の僕は。 ブログを書くということのメリットをあげると、 ・Webに対する意識が深まる ・いろんな人と繋がる ・他の人のブログをしっかり見るようになる(これが結構デカい) ・過去の自分と今の自分を比較できる判
制作でDreamweaverを使うときに、知っておきたい基本機能をワークスペースの各要素ごとにまとめてみました。ほんと基本的なことばっかりですが、意外と知らないまま使ってたっていう同僚もいたので。あんまり活用してないところがあれば、確認しておくのもいいかと思います。 目次 ワークスペースのレイアウト ファイルパネル ドキュメントウィンドウ コーディングツールバー ステータスバー 挿入パネル 検索および置換 プロパティインスペクター ワークスペースのレイアウト 僕のDreamweaverCS3はこんなワークスペースのレイアウトとなっております。結果パネルだけポップアップ。 (クリックで拡大) [スタイルレタリングツールバー]と[標準ツールバー]はほとんど使わないので非表示にしています。[挿入パネル]は必要なときだけオープン。 レイアウトは人ぞれぞれなので一番使いやすいかたちで。 ファイルパ
「サイトルート相対パス」とは、サイトのルートフォルダからドキュメントまでのパスを指定のことです。 例えば <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に関して素人のクライアントも多くいるので、どんな細かいディティールよりも、はっきりとしたわかりやすい理由のほうが納得してもらえることが多いです。 趣意書に含めている内容としては、 ・なぜこのデザインにしたのか (サイトの目的やターゲットユーザーなどから) ・どんなところを工夫したのか (デザインの付加価値) ・ユーザーに対してどんな効果を狙
PCサイトのコーディングではまだまだHTML4で行うことも多いですが、最近ではスマートフォンの案件も増え、HTML5でマークアップする機会が多くなってきました。 先日の記事、「うやむやにしていたHTML5の文書論理構造をきちんと考えてみる」では基本的な文書論理構造のフローチャートを載せました。今回はHTML5をマークアップするうえで無視できない『コンテンツ・モデル』について、自分の理解を深める意味でも、改めてまとめてみようかと思います。 目次 『コンテンツ・モデル』を理解する必要はあるの？ 『コンテンツ・モデル』って一体なに？ 『コンテンツ・モデル』の主要カテゴリー 注意！「カテゴリー」＝『コンテンツ・モデル』ではない 『コンテンツ・モデル』をもとにしたタグの配置ルール トランスペアレント・コンテンツとは？ まとめ 『コンテンツ・モデル』を理解する必要はあるの？ HTML4でマークアップし
制作会社の体制にもよると思いますが、大体の制作現場はWebディレクターが案件を管理して、Webデザイナーやプログラマーが作業する、というかたちだと思います。 制作会社勤めのWebデザイナーにとっては、Webディレクターと上手く仕事できるかどうかが、かなりミソと言っても過言ではないのでは。人間的に合う・合わないっていう相性の問題もあるとは思いますが、その中でも個人的にいいなぁと思うWebディレクターと、いかんなぁと思うWebディレクターの違いを書いてみようかと思います。 デキる デキない 1 ミーティングでは、あらかじめ要点を簡潔にまとめてあって、進行が非常にスムーズ。仕様書も作業者と意見を交わしながら進めていける。 ミーティングでの話がとにかく長く、仕様書を全部読みたがるので、どこが重要な部分なのかわからない。基本的に自分ひとりでしゃべっている。 2 質問がしやすい・相談がしやすいなど、
WordPressでiPhoneとandroidの最適表示といえば、人気なのはWPtouch プラグインを入れるだけで最適化されるとあって、これをつかってるブログをよくみかけます。さっそくいれてみました。 うん、まぁこうなりますね。いかにもデフォルトって感じです。 プルダウンでの「タグ」「アーカイブ」などの表示機能は捨てがたいけど、デザイン的にこのままではPCとテイストがかけ離れてしまう。 時間がたっぷりあればWPtouchのテーマを残しつつ今のデザインに近づけていくんだけど、中身見たら時間かかりそうだったので、いま流行りのレスポンシブWebデザインでスマホ対応してみようかと。 レスポンシブWebデザインとは PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してデ
パソコン変わるたびに忘れるので、メモ。 一般 画像をサイズ変更してペースト/配置のチェックを外す。 ファイル管理 プレビュー画像 → 保存しない ファイル拡張子 → 小文字を使用 PSD および PSB ファイルの互換性を優先 → 常にオフ パフォーマンス メモリの使用状況 → 推奨範囲の真ん中の数値 ヒストリー数 → 99 キャッシュレベル → 1 単位･定規 定規 → pixel 文字 → pixel コラムの大きさ → point ガイド･グリッド･スライス･カウント グリッド線 → 10pixel 分割数 → 5
WEBデザイナーをやっていると、いくつものWEBサイトリンク集を毎朝チェックしている人も多いと思います。インスピレーションのためだったり、その時のトレンドを知るためだったりとなにかと便利なものです。 僕も20才のときにWEBデザインの専門学校に入ってから、毎日飽きることもなく、国内･海外のさまざまなWEBサイトリンク集を眺め続けてきました。 当時はデザインのデの字もわからない初心者でしたので、とにかく少しでも早く素敵なサイトデザインを作りたいという気持ちが強く、そのためには、すでに公開されている素敵なサイトの技やテイストを盗むことが近道だと考えていました。 フォントのあしらい方、余白の取り方、色使い、全体のレイアウトなどをアイデアの引き出しに押し込み、トレンドが変わるたびに自分ポートフォリオサイトをリニューアルしたりもしました。 実際その方法は間違っていたとは思いませんし、そのおかげで
レスポンシブWEBデザインを用いて、外部CSSを一枚追加するだけでiPhone/androidに最適化するまでの流れを書いておきます。スマホ用のCSSをスマホにだけ読み込ませて、全体のCSSを上書きするだけなので、ブログのデザインによっては結構手軽に出来ます。 はじめにスマホ最適化後の要素配置を考える <head>にviewport設定とスマホ用CSSの記述を書く 固定幅をリキッドデザインで組みなおす フォントのサイズ、マージン、中央･水平揃えを調整 画像を2倍のサイズで用意する はじめにスマホ最適化後の要素配置を考える スマホは画面も小さいし、容量が重いとそれだけページの表示速度も落ちます。 ロゴ・メニュー・記事など最低限の要素だけ残し、あとはdisplay:none;で消してしまいましょう。 このブログのトップだと、オレンジで囲んだのがスマホで表示させない部分です。 残った要素を、最
仕事で使ってるDreamweaver環境設定や、効率を上げる方法を下記にまとめておきます。 目次 サイトの定義と管理を必ずやる ソースコードを見やすくカスタマイズ 便利なショートカットキーをつかう CSSコードヒントのカスタマイズ スニペットを追加してみる サイトの定義と管理を必ずやる 作業用のフォルダを決めて、まずサイトの定義をすることからDreamweaverのコーディングは始まります。 コレをしないで進めると、階層の全体像や相対パスがぼんやりしたままになり、とても危険。 超簡単な作業なので、やらない手はありません。 ローカルにあるフォルダを定義 [サイト] → [新規サイト] → [ローカル情報] 「サイト名」にプロジェクト名、「ローカルルートフォルダ」に作業用フォルダのパスを指定するだけでサイト定義は完了です。 設定したサイトは、[サイト] → [サイトの管理]の一覧から選択
iPhoneやandroidの案件ばっかりの今日この頃。 HTML5を使用することが多くなってきましたが、文書論理構造となると少しうやむやなところがありました。 <header>や<footer>などは特に違和感なく使えますが、<section>や<article>になると少し自信がなかったりするので、改めて見直してみます。 HTML5 Element Flowchart 『HTML5 文書論理構造』で探してみると、「HTML5 Element Flowchart 」なる画像が公開されていました。これがすごくわかりやすい。 HTML5で使用するタグを、消去法でマークアップしてます。 ではさっそくスタート。 1. それは、主要なナビゲーションブロックですか？ Yes <nav> で囲む グローバルナビゲーションやフッターナビゲーションなどに使用。 No 2へ 2. それは、自分自身だ
mnemoniqs'log.ではWEBデザインのあれこれを書き留めています2012/02/14 2012/02/07 2012/02/07 2012/02/06 2012/02/01 2012/01/31 2012/01/25
このページを最初にブックマークしてみませんか？
『mnemoniqs’log.』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
