タグ

Web制作に関するsulgraphicaのブックマーク (50)

  • 【重要発表】Googleがモバイル版とPC版を分離する事を発表!数ヶ月以内に実施の予定 | モバイル時代のSEO情報ブログ

    米国のSEOニュースサイト「Search Engine Land」によると、これまでGoogleのモバイル版の検索結果はPC版の順位に対してスマートフォン最適化をしているかどうかでプラスマイナスを加味するという順位決定方式だったのを数ヶ月以内に分離して、モバイル版Googleは独自の検索結果を表示することになりました。 Within months, Google to divide its index, giving mobile users better & fresher content Currently, Google has a single index of documents for search. Google's Gary Illyes announced they plan on releasing a separate mobile search index, whi

    【重要発表】Googleがモバイル版とPC版を分離する事を発表!数ヶ月以内に実施の予定 | モバイル時代のSEO情報ブログ
  • tumblrのテーマをカスタムし、追加したJavaScriptをスマホ表示でも有効にする - 移転→hapilaki.net

    tumblrのテーマをカスタムしてもスマホ表示では無効になる原因と対策がわかった。 原因 tumblrでは、モバイル用にHTMLを自動で最適化する。このためにカスタムした部分が無効になっていた。 カスタムで追加した外部JavaScriptファイルを読み込む設定が反映されなかったので、スマホ表示ではテーマのカスタムが有効になっていないことに気づいた。 対策 スマホ表示でもカスタムを有効にする設定は以下のとおり。 ダッシュボードの上部に並んでいる歯車をクリックしセッティング画面に切り替える。 テーマを編集するをクリック。 左側にサイドバーのあるプレビュー画面が表示される。 サイドバー下部の詳細設定をクリック。 モバイルレイアウトを利用するをクリックし無効にする(デフォルトでは有効になっているため)。 保存をクリックすれば完了。 THERMOS 真空断熱タンブラー 320ml ステンレス Tum

    tumblrのテーマをカスタムし、追加したJavaScriptをスマホ表示でも有効にする - 移転→hapilaki.net
  • 見栄えがよくなった!Web制作するなら知っておきたいjQueryプラグインまとめ

    作成:2014/05/7 更新:2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ?」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー 1.フィーチャーリスト 2.スティッキーヘッダー 画像エフェクト 3.マウスオーバーで画像にキャプション 4.イメージビューア 5.ズームインエフェクト 6.ブラーエフェクト スクロール 7.Infinite Scroll(無限スクロール) 8.画像シーケンス 9.横スクロール 10.フリック機能 レイアウト 11.画面全

    見栄えがよくなった!Web制作するなら知っておきたいjQueryプラグインまとめ
  • Webサイトの開設・再構築に!SEO対策の基本事項チェックリスト | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    元トリマー(ペットの美容師)のWebディレクター、はるきです。はじめまして。 犬のことでお困りの方は、ぜひご相談ください。 ちなみに、普段はECサイトの運営代行の会社でWebディレクターをしています。 すでにできあがったサイトの運営代行をしていて感じるのは、「SEOを意識した制作がなされていない」という現実です。 どうにかできないかといろいろググっていた中で「ホンマやで」と思ったのが、下記のページです。 参考:SEOが必要なケース – Googleウェブマスターツール https://support.google.com/webmasters/answer/35291?hl=ja 以下、ちょっとだけ抜粋します。 SEO サービスの利用を検討している場合は、早い段階で導入することをお勧めします。最適なタイミングは、サイトを再構築するときや新しいサイトを開設するときです。このタイミングなら、最

    Webサイトの開設・再構築に!SEO対策の基本事項チェックリスト | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 電通と博報堂は丸投げで中抜きしかやらない - はてな村定点観測所

    2014-05-05 電通と博報堂は丸投げで中抜きしかやらない 大手メディア系のWEB事業をやっていると電通や博報堂が絡んでくる。 WEBでは「電通や博報堂が裏でテレビなどのメディアを裏で操っていて私達は印象操作されている」的な陰謀論も盛んだ。実際に電通や博報堂と一緒に仕事をしていると、そういう面もあるかな〜と感じる一方で、電通や博報堂の丸投げ体質や中抜き体質を痛感させられる。 誰もが名前を知っているような大手企業のメディアやキャンペーンの仕事は、電通や博報堂がまず一次請けになる。そして二次請けに中小の制作会社がつく。三次請けに孫請けの制作会社やフリーランスがつく。二次請けの制作会社はディレクションや進捗管理を担当する。実際に実務としてCMSやキャンペーンサイトの開発や制作を行うのは三次請け以降の会社の仕事である場合が多い。 では、電通や博報堂は何をしているのか。「丸投げ」と「中抜き」だ。

    電通と博報堂は丸投げで中抜きしかやらない - はてな村定点観測所
  • 店舗サイトをWordpressで制作するときに役立つプラグイン5選 | Wordpress boy(ワードプレスボーイ)

    仕事柄、店舗さんのWEBサイトを制作する機会があるのですが、その時によく使うWordpressのプラグインがあります。 今回は、私が店舗サイトを制作する時に使っているプラグインを5つ紹介いたします。 BizCalendar/営業日カレンダーを作成できるプラグイン BizCalendarは、店舗の営業日やイベントカレンダーなどを作成できるプラグインです。 曜日を指定して定休日にすることもできますし、祝日を自動的に定休日にすることもできます。 イベントにはURLを設定し、詳しい情報等へリンクさせることもできます。

    店舗サイトをWordpressで制作するときに役立つプラグイン5選 | Wordpress boy(ワードプレスボーイ)
  • 他人のブログのアクセス数・被リンクを調査できる分析ツール 5 選 - Naifix

    ブログを運営していると、他人のブログ(競合サイト)のアクセス数はどれくらいあるのか、どんなキーワードで集客しているのか、気になってきますよね。 競合サイトを調査するメリットは以下の 3 点。 具体的な目標を設定するさいの目安にできる モチベーションを維持するきっかけになる 自分のブログに足りない点を見つけられる 競合サイトの分析に関する解説はこちら ツールを使えば調査はそれほど難しくありません。記事では、ライバルサイトを丸裸にする分析ツールを 5 つ紹介していきます。 他のブログのアクセス数が推測できる仕組み 他のブログのアクセス数を計測できるツールはいくつかあります。 独自のクローラーを走らせて分析していたり、主な検索キーワードの順位・CTR をもとに算出していたりと計測方法は様々。 なかには、無料で他サイトのデータを提供する代わりに、ユーザーの Google アナリティクスや Sea

    他人のブログのアクセス数・被リンクを調査できる分析ツール 5 選 - Naifix
  • すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ

    作成:2014/04/21 更新:2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び 1.今までの回り込み解除 2.横並びや並び順 3.均等に並べる/段組み ナビゲーションメニュー 4.多階層 ドロップダウン 5.amazon風 メガドロップダウン 6.ドロワーメニュー コンテンツメニュー 7.モーダルウィンドウ 8.アコーディオン 9.タブパネル テーブル 10.ストライプテーブル 11.レスポンシブ+テーブル リスト 12.カウント

    すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ
  • 自分のwebサイト作る工程 - MEMOGRAPHIX

    2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ

    自分のwebサイト作る工程 - MEMOGRAPHIX
  • WordPressのSEOを強化する!プロが教える8つの設定 | 知らないと損をするサーバーの話

    (この記事は2022年9月29日に更新されました) こんにちは。 京都のWebプランニング会社「ウェブライダー」の松尾です。 最近、某社からCPIサーバーに乗り換えたことがきっかけで、このコラムを書かせていただく機会を得ました。 現在、ウェブライダーでは、CPIの専用サーバーと共用サーバーのふたつを借り、さまざまなWebサイトを運営しています。 今回は、サイト制作に不可欠ともいえるCMS(コンテンツマネジメントシステム)の中から、「WordPress」にフォーカスを当て、「WordPressを使ったSEOに強いサイト制作の手順」についてお話しします。 WordPressはその導入の手軽さから、年々ユーザーを増やしており、今、全世界の1/4のサイトがWordPressで作られているといわれています。 また、拡張性にも優れており、たとえば、「沈黙のWebマーケティング」「沈黙のWebライティン

    WordPressのSEOを強化する!プロが教える8つの設定 | 知らないと損をするサーバーの話
  • Grid 日本語版

    なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは

    Grid 日本語版
  • 知らないと損!ウェブデザインに特化したPhotoshopの効率的な89の時短テクニック -神速 Photoshop Webデザイン編

    Photoshopを毎日使うウェブ制作者はぜひ目を通してほしい、Photoshopを自分の手足のように使えるようにするノウハウ、同じ結果でも遙かに時間が短縮されるテクニックが満載のオススメを紹介します。 同サイズの画像をスライスするのに5分かかっていたのが1分で! 10px以下の小さな文字を鮮明にするのに10分以上かかっていたのが5分でよりキレイに! など実用的な技が満載です。 「神速 Photoshop Webデザイン編」ではウェブデザインの現場でPhotoshopを使う時に役立つ情報が満載! Webデザインに特化したPhotoshopの環境設定方法から、すばやいスライス、効率的なカンプの作成、デザインのバリエーションを楽につくるなど、実践的なテクニックや便利なツール、そしていざという時の「直し」に強いデータをつくる方法など、デザイナーの時間を大幅に短縮します。 神速デザインの5箇条

  • 【WordPress】見出しから目次を自動生成。プラグイン不要!コピペでOK

    ブログ記事で目次を自動的に見出しから生成する方法を紹介します。WordPressプラグインは使わないで、自力でJavaScriptで設置してみました。 ゆめぴょんです。こんちはっ(^^)/ 私のブログでは文字数の多い記事もあるため、目次を設置したいと思ってました。一時期WordPressプラグインを用いて設置していましたが、意外と簡単に自前設置できるので制作してみました。 目次は上に表示されていると思います。クリックするとゆっくりとその見出しまでスクロールしていきます。読者にも便利なナビゲーションになります。 今回は「WordPressプラグインはずし特集」の第8弾です。今までの特集記事は全て下のリンクにまとめています。 今回、不要になるWordPressプラグイン これまた昨年くらいから、いろんなブログで紹介されている有名プラグイン「Table of Contents Plus」です。

    【WordPress】見出しから目次を自動生成。プラグイン不要!コピペでOK
  • 新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版!

    おはようございます。CD藤です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ!! さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト(以下ブクマサイト)だ!という5サイトを紹介します。 (今回はパソコンサイトを扱うブクマサイトに限らせて

    新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版!
  • 魔法!Webレイアウトを数回のクリックで『Velositey』#Photoshop

    さっさと仕事を終えて帰宅に向かいたいWebデザイナーさんへ朗報ですよ! Photoshopと合わせて使える便利機能を見つけたので紹介します。 Velositeyは、Webレイアウトを数回のクリックで完成できるPhotoshop用のプラグインです。例えば、以下のようなレイアウト。Photoshopを起動してから、わずか4回のクリックで完成です。 ワイヤーフレームにも使えますし、ここからさらに作り込んでWebデザインとして完成させることも可能ですね。 それでは実際に上のレイアウト作成にかかった『4クリック』を振り返ってみます。 著者情報:この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談>サービスメニュー】 💬 𝕏(twitter)は

    魔法!Webレイアウトを数回のクリックで『Velositey』#Photoshop
  • スマホアプリ開発勉強会 #dev.Talk @六本木で発表してきたよ - koogawa blog

    今日は、Talknoteさん主催の勉強会に参加してきました。 スマホアプリ開発勉強会〜著名開発者による脱初心者のかんどころ〜無料懇親会付き! 第1回 dev.Talk@六木 - dev.talk(at: 'Roppongi') | Doorkeeper 今回お声がけ頂いたTalknoteの小池さん、大川さんとは、以前ハッカソンでチームを組んだことがあり、それ以降も勉強会やセミナーでお会いするなど、ゆる〜く交流が続いていました。 イケてるベンチャーとハッカソンで準優勝してきたよ - koogawa blog 会社が六木にあるということは以前から伺っていたのですが、実際に社にお邪魔するのは今日が初めてです。 去年の6月に引っ越して来られたということもあり、オフィス内はとても綺麗でした。 以下は当日の発表メモになります。 iOS アプリ開発 脱初心者に向けて by @koogawa(私です

    スマホアプリ開発勉強会 #dev.Talk @六本木で発表してきたよ - koogawa blog
  • お問い合せフォームをコーディングするための9つのTips | 株式会社LIG

    こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは

    お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
  • コンテンツマーケティングはこう進める!成功事例から学ぶ法則

    (この記事は2022年9月29日に更新されました) 皆さん、こんにちは。京都のWebマーケティングチーム「ウェブライダー」の松尾です。 最近、某社からCPIサーバーに乗り換えたことがきっかけで、このコラムを書かせていただく機会を得ました。 前回、前々回と、レンタルサーバーの選び方に関するノウハウをお届けしてきました。 ソーシャルメディア隆盛の昨今、Webコンテンツがヒットすれば、急激なアクセスがやってきます。 その際、Webコンテンツがきちんと表示されるよう、サーバー周りの負荷対策が大事というお話をしました。 今回は少し視点を変え、“そもそも、アクセスを集めるためのWebコンテンツとはどう作ればよいのか?”ということをお話しします。 あなたは「コンテンツマーケティング」という言葉を聞いたことがありますか? コンテンツマーケティングとは、シンプルにいえば、読み物や動画などの何らかのWebコン

    コンテンツマーケティングはこう進める!成功事例から学ぶ法則
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

    dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
  • 経歴や会社の沿革ページに!簡単なCSSで実装するタイムライン

    2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう! ↑私が10年以上利用している会計ソフト! サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ

    経歴や会社の沿革ページに!簡単なCSSで実装するタイムライン