HTML/CSSのコーディング品質についておもうこと | ツクロア - DESIGN LAB
デザインフローシリーズをいっかい休みにして、最近おもったことをかいていきます。 タイトルからして、なんか意識高い系の話になりそうでいやなのですが。。 とはいえ、じぶんが普段思っていることと照らしあわせてなにか考察できればいいなと思います。 HTML/CSSのデザインコーディングについて 通常わたしたちは、デザイン業務をメインでしていますが、HTML/CSSへのコーディングもやっています。 コーディングって意外とデザインの視点が入りづらいところと思われがちなのですが、実際にはそうでもないな、と最近改めて思いました。 そこで、わたしたちが考えているコーディングへの思いを挙げていってみたいと思います。 デザインを受け取って、それをコーディングするだけではうまくいかない ほんとに、いわゆるコーディングの「作業」という業務ですね。 psdとjpgなどを受け取って、画像を書き出して、HTML/CSSで
UIデザインの背景と、デザイントレンドとの正しい付き合い方 | ベイジの社長ブログ
UIデザインを考えるうえで、その時々のトレンドを考慮することは不可欠です。しかし、ただ単に「トレンドだから」「今風になるから」という理由でトレンドを取り入れても、本当の意味で「良いデザイン」になることはありません。ここでは、UIデザインのトレンドの歴史から、技術的背景とUIデザインの関わり方を学びつつ、トレンドの正しい取り入れ方について解説していきます。 UIデザインの歴史 人がコンピューターを操作するためのユーザーインターフェース（以下、UI）は、テープやカードに打ち込まれた信号からコンピューターに出力させる、バッチインターフェースから始まりました。やがてより人が扱いやすいように、テキストを入力するコマンドラインインターフェースへと進化し、グラフィック性能の向上に伴い、1980年代以降はグラフィカルユーザーインターフェース（以下、GUI）が主流となっていきました。 1964年に登場したI
ホームページのアクセスアップの考え方と具体的な方法｜ふにろぐ
今日は「ホームページ/Webサイトへのアクセスを増やす」ために、どういう考え方が必要で、具体的にどのような方法があるのかについて説明します。 目次 アクセスを増やすための基本的な考え方 今あるアクセスの数を増やす 新しいアクセスを作る アクセスアップのための基礎知識。流入経路を把握する。 アクセスを増やすための流入経路と方法 検索キーワードから集客する ソーシャルメディアから集客する 検索広告から集客する ソーシャル広告から集客する リスティング・ソーシャル以外のWeb広告から集客する 他サイトからのリンクから集客する メルマガから集客する LINE@から集客する プレスリリースから集客する Web以外から集客する（クロスメディア） 口コミで集客する Googleマイビジネスから集客する アクセスを増やすための基本的な考え方 まず、ホームページの運用を考える上で「ホームページのアクセスを増
小さいメーカーのウェブ活用～リニューアルから1年の振り返り
会社のウェブサイトをリニューアルオープンしたのが昨年の5月22日。 1年が経過したので、振り返りとかをしてみようと思います。 このグラフを見て頂ければわかるように、リニューアルしてから、この1年でセッション数はありがたいことに右肩上がりの増え続けています。 この直近1ヶ月の前年対比の数値で見ると、セッション数で20倍、ユーザー数で23倍、ページビューで約5倍という結果になりました。リニューアル前のセッションやページビューがそもそも低かったということもありますが、ここまで伸びるとは正直思ってはいませんでした。 セッション数やページビューが劇的に伸びた分、一人当たりの平均PVは、5.51⇒1.47、平均セッション時間が3:46⇒50秒、直帰率は50.32%⇒84.37%と、このあたりの数値に関してはかなり悪化しました。 セッションやユーザー数、セッションなどが劇的に伸びたのは、ブログを開始した
理想と現実で終わらせない、Web制作者とクライアントとの関係性を改善するには
おかげさまで昨日の「オープンソースCMSは保守大事だよ」「用途に合わせてWordPress以外のCMSも選択してみようよ」という記事に多くの反響をいただきました。そのあと『WordPressが変えたのは、開発者とクライアントの関係性』というトラックバックもいただきましたので、引き続き構築という制作者サイドの話だけでなく、クライアントとの関係性に目を向けた補足記事を書いてみたいと思います。 とは言っても、今年はずっとそういうお話を各地のセミナーでさせていただいているので、振り返りと言うかたちになります。自分がconcrete5を専門にしているのでよく名前が出てくると思いますが、CMS全般の話と思って見ていただければと思います。 で、今年作った中でいちばんまとまった資料はこれかなと。Web制作者を対象にしたさぶみっと！オフ会の大阪・金沢のセミナーでお話ししました。 この発表のポイントは４点あり
WordPressを巡る理想と現実、あるいは誤解
ブコメでもすでに色々言われていて、自分のFacebookのタイムラインでも軒並み言及されているので、触れたくない理由は色々あるのだが、CMSで仕事をしている以上、反応しとかないといかんかなと思って筆を取る。そう、この件だ。 WordPressで「ささっと作る」で請けれなくなってる現状。 まとめると、WordPressは作り手にとっても楽に作れて、ウェブサイトを持ちたい人にとってもイニシャルコスト・ランニングコストともに安く済ませられる、みんながハッピーなツールだったはずが、そうではなくなってきた、と言う話。そうではなくなってきた根拠は何かと言うと、セキュリティ対応と管理画面の使いにくさ、カスタマイズ範囲の肥大化、の３点があるようだ。 セキュリティ対応は必要ですし、ランニングコストもかかります セキュリティ対応については、WordPressの導入によく使ってきたロリポップサーバーでWordP
Zurb Foundation 4 チートシート
CSSフレームワークとして、個人的にTwitter Bootstrapより断然注目しているZurb製のFoundation 4のまとめです。Bootstrapはウェブアプリ、ウェブサービス向けという感じがしますが、Foundationはウェブサイトに適していると思います。 今回はとりあえず使いはじめるためのガイドとして作成したもので、全ての機能を網羅したものではありません。詳細は公式ドキュメントを確認してください。また、Foundation 4にどんな要素があるのか、実際の表示で確認するには Kitchen Sink ページに全サンプルがあります。 今回記事にしてみて思ったのは、既存サイトであっても、これからFoundation 4を導入することができるように考えられているなということです。SCSSを使うことが前提になりますが。この記事でいくつかは紹介していますが、Mix-inが用意されて
今一番気になるCSSの美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect
Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De
構築のスピードとクオリティをあげる、本気のワイヤーフレームの書き方
要素を洗い出して、書き出す。 まずは、サイトの特長や企画特性に合わせて、各サイトの要素を洗い出します。コンテンツマップとは別に考える、いわゆる「パーツ」の部分も含まれるので、かなり量は膨大になりますが、しっかりやります。 んで、かならず「誰が読んでも何の事を言っているのかわかる一般用語で名称をつけます。」 例1：ECサイトの場合 ・ロゴ ・電話番号 ・SSLについての注釈 ・利用ガイド ・検索窓 ・買い物かご ・サジェストエリア ・商品画像 ・カテゴリーリスト ・TOPイメージ etc・・・ 上記の要素リストとは別に、コンテンツマップも作成したほうがいいです。 要素リストとは異なり、おおざっぱに言うとサイトの中にページとして存在させたい内容を洗い出します。 洗い出し終わったら、その内容を優先順位順に並び替え、一緒にできそうなところは一緒にして、分けた方がよさそうなところは分けて・・・とい
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
Codaに入れているClipを紹介するよー！WordPressメインだよ。 - Shinichi Nishikawa's
確認さんのCoda2とGitで作る超高速WordPress構築環境 | カクニンプラスのweb日誌がとっても参考になって刺激を受けたので、僕が普段からちょこちょこ登録しているCodaのクリップ（スニペット）の一部をご紹介します。 ちなみに、クリップというのは、よく使うコードを保存しておいて少ないキーボード操作でいつでも呼び出せるCodaの機能だよ。 get_posts() getposts + tabで、 <?php $args = array( 'post_type' => '', 'numberposts' => 5, '' => '', ); $got_posts = get_posts( $args ); foreach ( $got_posts as $post ) { setup_postdata( $post ); ?> <h1><?php the_title(); ?></
ウェブサービスチームからただよう死臭を嗅ぎ取る方法
わたしは「穴を掘って埋める仕事」を徹底して排除するよう日々コストをかけている。事前に察知できれば全力で回避に努める。だが、無限ループに陥ることもある。ループから抜けるには信用を失うなど相応の代償を支払うことになるけれど、早めの方が双方の傷は浅い。その見分け方を後述する。 工期がきまっていない企画書の完成日がきまっていない競合調査より先に自分達だけで企画を考えるターゲット層の調査より先に自分達だけで企画を考える議事録を取らない議事録を取り始めても訂正や意見がない企画書の雛形を作ってもあいまいな表現でだめ出しだけする思いつくままに会議を進める業務進行の定石を無視して効率の悪い方法を採用するリーダーがウェブに疎いメンバーに技術者がいない(外注)キラーコンテンツの準備より先に課金方法を取り上げるブレスト中にダメ出しする(ブレスト中は発想が縮むためダメ出し禁止)ことあるごとにその分野に疎いことをほの
query_postsを捨てよ、pre_get_postsを使おう【追記あり】【報告あり】
[2013-07-15追記] より詳しい補足記事を書きました。 → WordPressでページ送りが動かないのはどう考えてもquery_postsが悪い!【pre_get_postsまとめ】 WordPressのテンプレートをカスタマイズしようとして高確率でハマったり事故ったりするのが query_posts 関数というやつでして、ぐぐってみたらこの1年以内にも query_posts の使い方を「WordPress使うなら必須知識！」として解説したり、いまだに $paged を引数で渡さなきゃいかんとか、書いてあるブログ記事もたくさん見つかりまして頭痛が痛くなります。この際、はっきり言っておきましょう。 もう query_posts は一切使う必要ありません。 いやまあ、かく言うワタシも迷っていた時期がありまして。でも周りのWPerにquery_posts要らないらしいよ？という話を聞く
プログラミング出来ない奴ちょっと来い
プログラミング出来る方法教える。 世の中「プログラミング言語」を説く本はごまんとあれど「プログラミング」を説く本やブログはあまりない。 いや実際に "ない" というのはかなり語弊があるかもしれない。 しかし、通常この種の説明している本に辿り着くまでには多くの時間が必要だ。 普通の人は、多くの間違った方法を試し、その都度試行錯誤を重ね、プログラミング経験を経ることよって、重要な概念を獲得するのだと思う。 例えば、「計算機プログラムの構造と解釈」や「実用 Common Lisp」、「コンピュータプログラミングの概念・技法・モデル」などの書籍は現実の問題に対し "プログラム" をどう書くかという問題に正面から取り組んでいる良書だ。 しかし、どれだけ”普通の”プログラマが上記のような書籍を読んでいるのだろうか。 そして、"普通のプログラマ" がプログラミングを学ぶ書籍として、それらは果たして適切と
住太陽の「SEO 検索エンジン最適化」
SEO(Search Engine Optimization: 検索エンジン最適化)とは、自社のウェブページがGoogleやBingなどの検索結果で上位に表示されるようにウェブサイトの内外を改善する取り組みです。このSEO実践ガイドでは、SEOの意味や仕組みから自分で実施する方法や手順までを詳しく、初心者にもわかりやすく解説しています。 SEO(検索エンジン最適化)とはSEOとは自社のウェブページがGoogleやBingなどの検索結果で上位に表示されるようにウェブサイトの内外を改善する取り組みです。SEOを実施することで、自社の事業領域に関心の高い見込み客を効率的に、無料で集客できます。SEOは次のような取り組みを通じて実施します。 見込み客が必要としている役立つコンテンツをウェブサイト上で提供する。その情報を見込み客が検索エンジンで見つけやすいように最適化する。その情報が見込み客にとって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Inline Layout
http://blog.e-riverstyle.com/2011/01/rolewaiaria.html
デザイン設計の勉強になる、海外デザイナーによる有名サイトのリデザイン案
http://www.kakunin-pl.us/2013/03/coda-for-wordpress/