モバイル中心の動きが高まっている中、ホームページのレスポンシブ化はもはや避けて通れないものとなっています。 今回は、無料で使用できる商用可能なレスポンシブデザインのテンプレートサイト12選をご紹介します。 テンプレートサイトは英語表記のものが多いですが、今回紹介するサイトはどれも日本語で書かれているものばかりですので、使いたいテンプレートがあればすぐに使用することができます。 なお、ご利用の際は必ず利用規約を一読するようにしてください。 このニュースを読んだあなたにオススメ CSSの基本～スタイルシートとは レスポンシブデザインのメリット・デメリットを解説 ノンデザイナーでも分かりやすい！Webサイトを作成する際に知っておきたい主なレイアウト6選を解説 無料で利用できるHTML・WordPressのレスポンシブ対応テンプレートサイト12選 1.無料ホームページテンプレート.com http

人気のCMSであるWordPressの魅力といえば、沢山のプラグイン、高品質でデザイン性の高いテンプレートが数多く利用できることです。無料でも驚くほどクオリティの高いテンプレートが多く、誰でも本格的なホームページを制作することができます。 日々新たなテンプレートが追加・アップデートされているので、どれを使おうか迷ってしまうほど豊富に揃っています。今回は、そんな悩ましいテンプレート選びの参考となる最新WordPressテンプレートの中から厳選して8個をピックアップしてご紹介します。 これから新たにホームページを立ち上げる方、リニューアルを考えている方はぜひ参考にしてみてはいかがでしょうか。 最新WordPressテンプレートまとめ 1.Corporate plus https://wordpress.org/themes/corporate-plus/ カスタマイズ性に富んだ、多目的使用がで

様々な製品のプレゼンテーションにおいては当然製品を魅力的に見せたいものです。そんな時、ビジュアルの訴求力をぐっと上げてくれるのがPSDファイルです。 PSDファイルとは画像ファイル形式の一つで、主な特徴としてレイヤーが分かれた状態になっており編集情報を保存している点が挙げられます。 Tシャツ、バッグといった製品はもちろん、名刺、ホームページ、機器まであらゆるテンプレート素材が存在しており、最近ではフリーでも高クオリティなデザインのものが配布されておりますので、利用しない手はありません。 今回は、テンプレートとして使いやすいものをメインに無料のPSDファイルを57個ご紹介します。気になったものがあれば是非活用してみてください。 無料PSDファイルまとめ 1.Ghost Ship Mobile UI Kit http://pixelbuddha.net/freebie/free-ui-kit-

各調査機関によると、2015年の段階でスマホの普及率は5~7割に上り、うち20代に限っては9割を超えているようです。若年層を中心にスマホは生活に欠かせない存在となり、インターネット利用もPCからスマホへ移行するなか、Web上でビジネスを行うのであれば、ホームページのスマホ最適化は必須です。しかし、スマホ最適化と言っても、自社のホームページの場合、どのような形式が最適なのか、悩まれている方も多いのではないでしょうか。 今回は、スマホ最適化を実施する前に見ておきたいスマホサイトの参考にしたデザインがまとまったものをご紹介します。これからスマホサイトを制作する予定の方、またはリニューアルを考えられている方はぜひ参考にしてみてください。 サイトデザインの参考にしたい 1.スマートフォンサイト集めました http://sp-web.jp/ 新しいスマホサイトが出るたびに更新されているため、最新のスマ

社会人であれば、タスクやスケジュールをいかに効率的に管理できるかを模索するのは当たり前のことです。 スケジュール・タスク管理ツールは多数リリースされていますが、その中から自分にあったものを探すのはなかなか困難です。 今回は、無料で高機能なスケジュール・タスク管理ツールをまとめました。 今年こそはしっかりスケジュール管理したいと考えている方は、ぜひ確認してみてください。 1.複数人のスケジュールを一覧で確認できるガントチャートを活用する タスク管理できてる？無料で使えるガントチャート、進捗管理ツール11選 ガントチャートとは、複数のメンバーや工程のスケジュールを一度に確認できる表を指し、プロジェクト管理や生産管理の現場で利用されています。 例えばこれからホームページを制作するとなったとき、ディレクター、エンジニア、デザイナーそれぞれが互いの進捗に影響が出るため、各々でチームメンバーのタスクや

【パワーポイント作成】伝わるデザインのコツ ほんの一手間で驚くほど見やすく変わる！パワーポイントやGoogleスライドなど資料のデザインを見やすく仕上げるコツを解説します。 無料で使えるKeynoteテンプレートまとめ 1.Azusa http://memo.sanographix.net/post/82160791768 "大体いい感じになる"というコンセプトのKeynoteテンプレートです。今時っぽいカラーリングと素敵なフォントのスライドが作れます。日本製ですので、使いやすさも抜群です。 2.Modern Report https://hislide.io/product/modern-report-free-key-template/ 白を基調とした背面と黒や灰色文字によってシックな雰囲気のあるテンプレートです。 3.X Grey Keynote Template http://ww

今やどのような業種でもWebマーケティングは欠かすことのできない存在となり、ほぼ全ての企業が「ホームページ」を持つ時代となりました。 そのような背景もあり、CMSの登場をきっかけにホームページ作成のハードルは年を追う毎にどんどん低くなり、ブログを作るような感覚で簡単に短時間で制作できるようになっています。 しかし、制作が簡単になった分、「とりあえず作ってみて様子を見る」というような運用をされている方も少なくないのではないでしょうか。 ホームページはただ作っただけでは意味を持ちません。 今回は、ホームページ制作時に必ず踏むべきプロセスについて解説します。 ホームページにはコンセプトが不可欠 Webで収益を上げたい、インバウンド営業を強化したい、ブランド認知を広めたい等、企業としてホームページを立ち上げる目的は様々です。 ただ、どのような目的であれ、ホームページを作る時に避けて通れないのは「ど

ここ数年で一気に認知が広がった「レスポンシブデザイン」。 レスポンシブデザインとは、1つのHTMLファイルで全てのデバイス表示に対応できるデザインの仕様を指しますが、その仕様上エラーが起きにくいことなどからGoogleも利用を推奨しています。 あらゆるホームページがレスポンシブデザインを採用していますが、「周りが使っているから」と安直にレスポンシブを採用するのはオススメしません。 どのような特徴があるのかをしっかり理解してから採用するかどうかを検討しましょう。 今回は、これからレスポンシブデザインを採用しようか考えている方に知っておいてほしい情報をまとめました。 1.レスポンシブデザインとは？ レスポンシブデザインの基礎と制作時の注意点を解説 通常、ホームページを作成する際にはパソコン、スマホ、タブレットなど表示サイズの異なるデバイス毎にページを制作する必要がありましたが、レスポンシブデザ

この記事は2016年3月27日の記事を再編集しています 多くのホームページに導入されているレスポンシブデザインですが、レスポンシブ化することによってどのようなメリット、またはデメリットが発生するか把握できていますか？ 「Googleが推奨しているから」、「流行しているから」、という単純な理由でレスポンシブデザインを導入するのではなく、長所短所を見極めたうえで、自社のホームページに最適だと判断したうえで利用するのが良いでしょう。 今回は、レスポンシブデザインのメリットとデメリットを解説します。 レスポンシブデザインとは そもそもレスポンシブデザインとは何を指すのでしょう。 Googleは、 ユーザーの デバイス（パソコン、 タブレット、モバイル、非視覚的 ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）表示を変えること

集客手段の1つとして、ホームページは企業にとって今や欠かせない存在となりました。 ホームページ制作のハードルは年々下がり、制作関連の専門知識が無い方でもある程度のクオリティのホームページは作れるようになりました。 今回は、Webデザインのスキルアップに繋がる記事をまとめました。 現在Webデザイナーとして働かれている方も、これからWebデザイナーを目指している方も一度チェックしておきましょう。 関連記事 デザインする際に知っておくと使える小ワザ集 Webデザイナー必見！すぐに使える高品質な無料デザイン素材まとめ Webデザインに役立つ無料のツール・デザイン集まとめ 1.Photoshopを使う際の活用術17記事 WebデザインでPhotoshopを使う際の活用術17記事 写真の補正やグラフィック作成など、デザインに関するあらゆる作業で活用できるAdobe社のPhotoshopは、Webデザ

この記事は2016年4月8日に更新しています このページを見ているあなたは何らかのWebマーケティングに関わる担当者でしょうか。 そうであれば、売上や問い合わせ数を上げなければいけない立場でしょうか。 実は日本の企業体のほとんどが中小企業ですが、はっきり言って中小企業の方が最初にやるべきWebでの集客施策はランディングページと言っても過言ではありません。 なぜランディングページを最初にやるべきなのでしょうか。 今回は、ランディングページを最初にやるべき理由と、そのランディングページの作り方など、ランディングページで売上や問い合わせ数を上げるために必要なことをまとめて解説します。 この記事が読み終わる頃には、ランディングページで成果を上げるための第一歩を踏み出しているはずです。それではいってみましょう。 目次 ランディングページとは ランディングページ最適化（LPO）が重要な理由 購入率を改

作品紹介をより魅力的にすることができる「PSDファイル」をご存知でしょうか。 PSDファイル形式のモックアップ、テンプレートは手軽に編集することが可能で、自作デザインの写真をはめ込むだけで活用できます。また、完成作品のラフを作りたい時にもサクッと作れて便利です。商品・サービスのプレゼンテーションなどでラフが必要な時に活用してみてはいかがでしょうか。 今回は、無料で使えるPSDファイルをまとめてご紹介します。気になるものがあればぜひダウンロードしてみてください。 無料で使えるPSDファイルまとめ 1. Psd Slipcase Book Mockup Vol8 https://www.pixeden.com/psd-mock-up-templates/psd-slipcase-book-mockup-vol8 本のスリップケースを再現したPSDモックアップ素材で、ケース表面と本のデザイン両方

Web担当者様であれば、自社ホームページを毎日のようにチェックされていると思いますが、スマホサイトでの表示に関しても定期的に確認されているでしょうか。 スマホサイトでのみ起こる表示エラ－も存在するため、定期的にチェックして、もしエラーが発生した場合は速やかに対処する必要があります。 今回は、スマホだけで起こりうるエラーの種類とその対処方法について解説します。 スマホサイトだけで起こる表示エラーの原因は？ 情報を収集するためにホームページをクロールする「Googlebot」は、パソコン用、スマートフォン用、フィーチャーフォン用の3種類存在しています。 なんらかの原因でスマホ用のGooglebotのみ読み込みができないとスマホ画面のみエラーが表示されます。 スマホのみでエラーが出る場合は404（表示エラー）の場合が多く、まれにサーバーエラー（500エラー）が出る場合もあります。 今回は404エ

この記事は2015年10月22日に公開された記事を再編集したものです。 デザイン作業に慣れてくると、どうしても自分の癖が出てしまい、似たようなデザインばかりになってしまいがちです。特にWebデザインのパーツは、毎回同じようなデザインを作ってしまうことも少なくありません。しかし、自分が持っているアイデアだけでは、なかなか新しいデザインは浮かんでこないものです。 そこでオススメしたいのがギャラリーサイトです。その中でもパーツごとに収集したギャラリーサイトは、デザインの「部分」だけでも参考にすることができるため非常に便利です。デザインアイデアが欲しい時こそ、多くのヒントが詰まっている素材サイトを活用しましょう。 今回は、Webデザインのパーツをまとめたギャラリーサイトを36個まとめてご紹介します。 ※サイトによっては素材やソースコードなどを配布・掲載しているものもあります。ご利用の際は、必ず利用

WordPressは、個人ブログからコーポレートサイトやショッピングサイトまで利用の幅は多岐にわたり、世界中の有志によって年々バージョンアップが繰り返されています。 WordPressの利点は初心者でも使いやすく、上級者にとっては細部にこだわったカスタマイズが可能です。 中でも、豊富に用意されているテーマを使えば、デザイン初心者でもプロが作るようなデザインのホームページを簡単に作る事もできます。 今回は、9月に追加された最新のWordPressテーマを紹介します。 9月に公開されたWordPressテーマまとめ 1. Zincy Lite 出典：WORDPRESS.ORG 企業のコーポレートサイト向けです。 全体的にシンプルなデザインで、コーポレートサイトにとって必要最低限な機能が踏襲されています。 一見、カッチリとした印象を持ちますが、アイコンにカーソルを当てると動くギミックがあるなど、

人気の衰えることを知らないブログソフトウェアのWordPress。 無料で使えるテンプレートは世界規模で今も多く発表され続けています。 今回は、最近公開されたものと最近アップデートしたもの両方をご紹介します。 新しいホームページを制作する際やリニューアルする際の参考になれば幸いです。 無料かつハイクオリティーなWordPress無料テンプレートまとめ 1．HIPWORDS 出典：WORDPRESS.ORG 2015年8月現在、最終更新日が2015年6月4日で改善され続けている無料テンプレート。 シンプルな作りで、過去の記事やコメントなどサイドバーに表示可能です。 ブログに特化したテンプレートで、整理整頓されています。 また、離脱率の関係で表示速度を気にする方にオススメです。 2．Simplicity 出典：Simplicity 2014年7月8日に公開されてから、今での更新され続けている無

WordPressは多くのテーマが公開されていて、何を使うべきか悩んでしまいます。 例えば、海外のテンプレートはデザイン性が高いのが多い傾向にあり、一方、国内のテンプレートは初めての方にも使いやすいものが多くあります。 今回はその中でも編集部がおすすめするテーマを紹介します。 どんな目的で利用するか、どんなコンテンツでアピールしていくのかに合わせてテーマをお選びください。 ※基本利用料は無料ですが、一部機能制限を解除するための有料プランもあります。 目次 ブログ向けテンプレート メディア向けテンプレート ポートフォリオ向けテンプレート EC向けテンプレート 国内産の無料Wordpressテンプレート 海外産の無料Wordpressテンプレート ブログ向けWordpress（ワードプレス）無料テーマテンプレート コンテンツSEOがやりたいなら「Xeory Base」 ダウンロード｜デモ

Web担当者の皆様は、ページのちょっとした修正を自分で行うケースが少なからずあるのではないでしょうか。HTMLのタグや属性など、それぞれの正しい読み方を知っていますか？ 「qやa」など、一見するとどう読んでいいかわからないものが多いため、なんとなく読んでしまっている方も多いでしょう。 今回は、読みづらいHTMLタグ・属性の読み方をまとめました。読み方に自信が無い方はこの機会に不安を解消しておきましょう。 HTMLタグの読み方 1.!DOCTYPE 読み方：ドックタイプ Document Type Definitionの略。文章の先頭に記載する宣言文。 2.a 読み方：アンカー anchorの略。リンクの出発点・到達点を指定するHTMLタグ。 3.br 読み方：ブレイク Breakの略。改行を指定するHTMLタグ。 4.dfn 読み方：ディフィニション Definitionの略。定義する用語

簡単にブログやWebマガジンが作れる「Tumblr」が最近人気を集めています。 Tumblrの特徴といえば、オシャレでデザイン性の高いテンプレートが豊富に揃っていることです。 クリエイターのポートフォリオに最適なものからブログにぴったりのものまで幅広いデザイン・レイアウトのものを選択することができます。 今回はTumblrの数あるテンプレートの中から、オススメのテンプレートを48個まとめてご紹介します。ご自身にぴったりのものを探してみてください。 Tumblrオススメのテンプレート32まとめ 1.Zen https://www.tumblr.com/theme/39508 画像、テキストを大きめに表示し見やすくレイアウトしてくれるテンプレートです。 ソーシャルボタンも用意されています。 2.Minimalism https://www.tumblr.com/theme/39633 画像収集

ホームページを運営し、改善施策を実行していくなかで、ホームページ内のデザインの微修正や画像の追加が必要になる場面が多々あるのではないでしょうか。 外部や社内のデザイナーに依頼する際は、仕様書を作成して、修正内容を確認して、修正されたら成果物をチェックして、必要があれば再度修正依頼をして…と、ちょっとした修正でも思った以上に工数がかかってしまう場合があります。 そんな時、ちょっとした修正や画像作成であれば自分でできるようになっておくと、上記のような工数を一気に短縮することができます。 今回は、ノンデザイナーでもある程度のレベルのデザインを作成するために役立つ知識やサービスをご紹介します。 1. 【非デザイナー必見！】知っておくべきデザインの基礎法則６つ https://ferret-plus.com/641 デザインは感性によるものが大きいというイメージがあるかもしれませんが、デザインにはい