タグ

webデザインに関するrub73のブックマーク (12)

  • webディレクターだけど、初心者に役立つサイト教える:無題のドキュメント

    webディレクターだけど、初心者に役立つサイト教える 【沈黙のWebマーケティング】 1: 以下、\(^o^)/でVIPがお送りします :2015/02/06(金) 17:41:24.70 ID:flJZIImcH.net 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ 2: 以下、\(^o^)/でVIPがお送りします :2015/02/06(金) 17:42:31.08 ID:flJZIImcH.net まずはドットインストール http://dotinstall.com/ 開発環境の構築方法からプログラミング言語の基礎の基礎を教えてくれる 一回の動画の時間が短く区切られているので使いやすい。 プロからはあまり評判

  • 超便利!「検索アナリティクス」がウェブマスターツールで公開!|男子ハック

    検索アナリティクスでは「Googleの検索結果」にどのように表示されたのかをレポート化することが可能。「検索クエリ」「ページ」「国」「日付」「デバイス」「検索タイプ」でフィルタをし「クリック数」「表示回数」「CTR」「掲載順位」がどのように変化したのかグラフにして表示することができます。 先日行われた「モバイルフレンドリーアップデート」の行われた日に「更新」というラインが引かれているので、アップデートの影響を確認することも簡単です。 例えば「掲載順位が上位にあるキーワードなのに、クリックされていない記事」というデータや、逆に「掲載順位が上位ではないのに、クリックされている記事」というデータを見つけることが容易になります。 従来のレポートと計算方法が変更され、より「正確」なデータを提供「Google ウェブマスター向け公式ブログ」の説明によると、新しいレポートは「以前のデータに比べかなり正確

    超便利!「検索アナリティクス」がウェブマスターツールで公開!|男子ハック
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • 「ドキュメントデザイン」で最も重要な50のルールをまとめた「Color CRAYON-TIP Method」

    グラフィックデザイナーがドキュメントをデザインするにあたって特に重要な要素を「Color(カラー)」「Contrast(コントラスト)」「Repetition(反復)」「Arrangement(アレンジ)」「Why(なぜ)」「Organization(組織化)」「Negative Space(ネガティブスペース)」「Typography(タイポグラフィ)」「Iconography(図像学)」「Photography(フォトグラフィ)」という10のカテゴリに分類し、各カテゴリに5つずつ、全部で50のルールを盛り込んだインフォグラフィックが「Color CRAYON-TIP」です。 The 50 Most Important Rules of Document Design: Color CRAYON-TIP Method http://thevisualcommunicationguy.co

    「ドキュメントデザイン」で最も重要な50のルールをまとめた「Color CRAYON-TIP Method」
  • 月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ

    クックパッド ダイエット事業室の田中です。昨年5月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の「文言(言葉)」をどのようなプロセスで決定していますか? UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア

    月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ
  • 1年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】 - LITERALLY

    Desk | Flickr デザインスキルを身につけてから、世界がずいぶん広がった。自分一人の力で仕事が出来るようになったし、発信したいものがあれば好きなようにWebページを作れば良いし、プレゼンのスライドも何倍も印象的に作れるようになった。デザインで学んだことは生活していれば至るところで活きてくるので投資効果はかなり大きいはず。 今回は、Webデザインの知識が一切なかった僕が、会社や飲店からWebデザイン仕事を請けるようになるまでの1年間に実行した8のステップ(デザインの勉強4+Webデザインの勉強4)をまとめてみる。ここで書くのは目安として、HTMLCSSを使ったレスポンシブデザインのウェブサイトを作るあたりまで想定してもらえると良い。 いちおう自己紹介を簡単に 独学でデザインの勉強を始めたのは2年前の2012年後半。とは言っても雑誌のレイアウトデザイン(グラフィック・デザイン)

    1年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】 - LITERALLY
  • 情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ

    Empty Data(またはEmpty Status)」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります(Webでの404に近いですが、少し違います)。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考:モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし

    情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
  • 16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL

    ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか? 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な写真があるというものです。 これは美容院という商売の特性

    16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL
  • 【デザインまとめ】綺麗なデザインの管理画面 40種類

    今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼

    【デザインまとめ】綺麗なデザインの管理画面 40種類
    rub73
    rub73 2014/05/15
    実装されたサービスが利用したい
  • 今年からウェブ業界に務めた人にお薦めしたい本10冊 - 鈴木です。別館

    いい年して、まだまだウェブ業界歴は短い鈴木です。 この年齢から、経験無しでこの業界に移る人は少ないと思います。そんな鈴木がウェブ業界に勤めだして間もない方にお薦めしたい10冊を紹介します。 WACA初級ウェブ解析士 認定試験公式テキスト第5版 作者: WACA 一般社団法人ウェブ解析士協会,WACA 一般社団法人ウェブ解析士協会カリキュラム委員会 出版社/メーカー: WACA 一般社団法人ウェブ解析士協会 発売日: 2014 メディア: 大型 この商品を含むブログを見る 初級ウェブ解析士という試験の教ですが、この資格を受ける受けない関係なしに読んでおいて損の無い1冊です。ウェブ業界にいる以上覚えないといけないアクセス解析やウェブマーケティングの事が体系的に学べます。しかし、この書籍で学べるのは表面上の体系です。ただ、繋がりが見えてくるので、その中で自分で覚えないといけない事を中心に他

    今年からウェブ業界に務めた人にお薦めしたい本10冊 - 鈴木です。別館
  • 長さ(length)の単位 - Web標準普及プロジェクト

    長さ(length)の単位 CSS2では様々な単位を使って「長さ」を指定できるようになっています。 長さ(length)の値にはゼロの場合を除き、 常に単位を付けなくてはいけません。 その単位について少し解説をします。 絶対単位と相対単位 長さの単位は絶対単位と相対単位の2種類に分類することができます。 絶対単位 inインチ。1インチは2.54センチメートル。 cmセンチメートル。 mmミリメートル。 ptポイント。CSS2では1ポイントは72分の1インチ。 pcパイカ。1パイカは12ポイント。 相対単位 pxピクセル。出力機器(デバイス)の表示の最小単位(画素)。 em関連要素のfont-size値。 ex関連要素のフォントのx-height。 絶対単位は見てわかるように実際の物理的な長さが単位となります。 相対単位に分類されているピクセルはディスプレイでの表示を前提に考えると絶対単位の

  • https://www.e-tamago.net/etre-m/wd_tips/wd9.htm

  • 1