タグ

ブックマーク / www.mdn.co.jp (12)

  • 第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント - MdN Design Interactive

    知ってるつもりで意外と知らないSEO最新のキホン 第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント 2015年03月24日 TEXT:押谷圭佑(ヴォラーレ株式会社) こんにちは。ヴォラーレ株式会社の押谷です。前回はリニューアルにおけるSEOの全体感の説明をしましたが、今回はより実践的で細かな施策を紹介します。 クライアントに「いま手がけているWebサイトのSEOもお願いしたい」と依頼された経験のあるWebデザイナーや、Web担当者を兼務しているWebデザイナーは、WebサイトのSEO対策を考えたことが一度はあると思います。そうしたWebデザイナーのために、押さえておくべき18のSEO内部施策に関するポイントを紹介していきます。 ■HTMLの調整 基的に、1ページに対して1テーマ(キーワード)として対策します。これはSEOにおけるHTMLの調整の基であり、対策する

    第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント - MdN Design Interactive
    heatman
    heatman 2015/06/21
  • MdN Design|総合情報サイト

    Lesson 08 ブロック要素の全体をリンク領域に設定する- Webデザイン表現&技法の新・スタンダード・インタラクション編 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2024.6.12 WED

    MdN Design|総合情報サイト
    heatman
    heatman 2015/03/22
  • 1年生デザイナーの1週間/その90 村田 智さん(はてな) - MdN Design Interactive

    デザイナーという職業に憧れる読者のみなさんに先駆けて、一足早くデザイナーになった先輩デザイナーの1週間を追いかける、このコーナー。月曜、リリース直前の準備中の巻。 今月の1年生デザイナー 村田 智さん(はてな) 〔プロフィール〕 むらた・さとし●埼玉県出身の23歳。物心ついたときには、家にワープロもパソコンもあった村田さんは、中学生の頃からテキストベースのWebサイトをつくるようになる。そのWebサイトがきっかけで、高校2年の頃から約5年ほどWeb周りのグラフィック制作やデザイン・コーディングの仕事をすることに。作業は全部自宅で行い、打ち合わせが必要なときのみ出かけて行くというスタイルで、学校とはまったく別の経験を積んできた。また、Webサイトの情報収集のために屋に通ううちに、さらにエディトリアルデザインに興味を持つようにもなる。高校時代は美術部で油絵を描くかたわら、生徒会で文化祭のポス

    1年生デザイナーの1週間/その90 村田 智さん(はてな) - MdN Design Interactive
    heatman
    heatman 2014/02/22
  • 即戦力となるアナログ表現の技を押さえる - MdN Design Interactive

    腕のいいデザイン事務所で修業しないと ふつうは身につかない知識と技と心得 10 即戦力となるアナログ表現の技を押さえる 解説: 高橋としゆき[Graphic Arts Unit] url: www.graphicartsunit.com/ 使用ソフト: Photoshop CS3 かすれや汚れなどといった、アナログの演出がデザインで必要になる機会は多いはずだ。そうしたアナログ感の演出にはさまざまな方法があるが、基的な手法はしっかり身につけておきたい。ここでは、デジタルだけでアナログ感を表現する方法を紹介しよう。 実際にプリントアウトして作業する時間や環境がない場合や、画材などを使ったアナログの作業を経ずに、もっと手軽にアナログ感を表現したいということもあるだろう。アナログ風の質感はPhotoshopのフィルタなどを駆使して表現することもできるので、そうした技を使った多彩なアナログ表現を覚

    即戦力となるアナログ表現の技を押さえる - MdN Design Interactive
  • ゼロからはじめるHTML5でのサイト制作/最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive

    前回までの記事で簡単なレイアウトを作成して、xhtmlHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説:(有)ムーニーワークス 林 豊/田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT

    ゼロからはじめるHTML5でのサイト制作/最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
  • MdN Design|総合情報サイト

    スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。 そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLJavaScriptCSSを使用して、タブレットタイプ用に表示を最適化させる。 タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基的に問題ない。 ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。 今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。 【1】のような、ブログ形式のPCページ構成をベースに構築していく。 使用するCSSは ・PCCSS(デフォルト) ・スマートフォン用CSS ・タブ

    MdN Design|総合情報サイト
  • MdN Design|総合情報サイト

    Node.jsのインストールと 下準備 Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。 Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。 Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布さ

    MdN Design|総合情報サイト
  • ノウハウが世の中にない、まったくの手探り状態だった。 - WEBクリエイティブの舞台裏 第2回「SVG女子」 - MdN Design Interactive

    <<< 前ページ:「読み込み高速化、データ軽量化への挑戦。」 日マイクロソフト株式会社でUXエバンジェリズムを担当する春日井良隆氏。今回のコンテンツ制作に至った背景、プロモーションの狙いについて語ってもらった。 ──今回、SVGというフォーマットを使用した真意は? 春日井●IE9がSVGをサポートして、SVGのレンダリングにGPUアクセラレーションが効くので、その機能をコンテンツとして見せたかった。Webで一般的に扱われる画像はJPEGかPNG、GIFなどの、いわゆるビットマップ画像です。それに対してSVGはベクターフォーマット。一般的には、地図や設計図のような精細な線画に使われていますが、スクリーンの大きさに関わらず滑らかな線画を見せられるのはベクターフォーマットならではの特性ですし、エンターテイメントでも使い道はあるはずだと思っていました。これで全ブラウザがSVGをサポートしたので、

    ノウハウが世の中にない、まったくの手探り状態だった。 - WEBクリエイティブの舞台裏 第2回「SVG女子」 - MdN Design Interactive
  • MdN Design|総合情報サイト

    作業効率がアップする隠れた使い方教えます! WEB制作、プロの無料サービス活用術 ──サイトチェックに使えるツール(1) クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス/ツールが豊富に取りそろってきた。記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための82の活用術を紹介する。Webサイトが完成しても即納品というわけにはいかない。不具合がないかを検証することもWeb制作の一部といっても過言ではない。ここではチェックツール活用例を紹介する。 ■バックナンバー 第1回 デザインに使えるツール(1)はこちら 第2回 デザインに使えるツール(2)はこちら 第3回 デザインに使えるツール(3)はこちら 第4回 コーディングに使えるツール(1)はこちら 第5回 コーディングに使えるツ

    MdN Design|総合情報サイト
  • 第1回 Webサイト構築・運用の流れ - MdN Design Interactive

    WEBディレクションの極意 文=島元大輔 大阪Web制作会社でWebディレクターとして活躍後、(株)キノトロープに入社。数多くの企業Webサイト構築プロジェクトにかかわる。その後、(株)ライブドアに入社、現在は(株)セシールに在籍。著書として「だから、Webディレクターはやめられない」(ソシム刊)。 url.blog-project.cecile.co.jp/ 第1回 Webサイト構築・運用の流れ 企業のWebサイトを構築するとき、最初から最後までひとりでつくり上げるということはまずない。制作も運用もさまざまな人物が登場することになる。そこで、その多くの登場人物をまとめ上げ、作業をスムーズに進行させるWebディレクターの存在が欠かせないものとなる。このページではWebディレクションに焦点を当てて、Webサイト構築・運用の進め方、コツ、心得などをそれぞれの場面ごとに解説していく。 Webサ

  • MdN Design|総合情報サイト

    第2回「Coming Soonページをデザインする」 2009年11月26日 翻訳元サイト:Smashing Magazine http://www.smashingmagazine.com/ 原文:Designing “Coming Soon” Pages http://www.smashingmagazine.com/2009/11/10/designing-coming-soon-pages/ 翻訳:中野恵美子 ※記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています ドメインを購入したが、まだWebサイトをローンチしていない時、何をすべきか決めるのは、いつでもちょっとした難問だ。ドメイン管理団体やWebホスティング会社のデフォルトページをそのまま表示させておくのは、プロらしいとは言えない。とはいえ、Webサイト制作に格的に取り組むべき段階では、汎用的な

    MdN Design|総合情報サイト
  • MdN Design|総合情報サイト

    Photoshop、Fireworks、Dreamwaver、etc. WEBの作業が楽になるテクニック総まとめ 第2回 「あの作業をもっと早くしたい!!」と思っても、改善できずに制作を続けている場合もあるだろう。そこで、Web制作が楽になる操作テクニックをまとめて紹介!! ふだんから使用しているさまざまなソフトウエアを使いこなし手間どる作業をスムーズに行おう。

    MdN Design|総合情報サイト
  • 1