PWA対応サイト5選！アプリ開発よりも導入コストの低いPWAとは？
「ユーザーの利便性を考えてスマホのネイティブアプリを作成したけれど、開発にかける予算がない......」とお悩みの企業も多いでしょう。ユーザーにアプリを提供することは企業との接触機会を増やし、愛着度を高める施策になります。 しかし、アプリ開発には技術が高くなればなるほど、莫大な予算がかかります。そんな時に、スマホのネイティブアプリのような操作性を実現できる「PWA」にたどり着いた方も多いのではないでしょうか。 そこでこの記事では、 PWAとは？ PWA対応サイト5選 PWAの導入するメリット について紹介します。 PWAとは PWAとは、「Progressive Web Apps」の略称で、Webサイトにネイティブアプリのような機能性を持たせる技術のことです。PWAを導入することにより、ユーザーはアプリをダウンロードせずに機能性の高いWebサイトを実現できます。 現在はAndroidのみに
作りたいサイトによって選び方が違う！CMSの種類と特徴
ホームページ作成のハードルを下げ、安価で簡単なWebサイトの構築・運用を可能とするCMS。その種類はかなり豊富であるため、作りたいサイトに応じて適切なCMSを選ぶ必要があります。 この記事では、ECサイト・会員制サイト・オウンドメディアに焦点を当て、それぞれのサイトを作る際に求められる機能と、人気があるCMSについて解説していきます。 圧倒的に使いやすいCMS！見たまま編集のferret One 直感的な操作で、Webサイト・LP・フォームも作成も自分で完了！さらに、問い合わせの管理や効果測定もできてPDCAが高速に回ります。 目次 ECサイトに必要な機能 会員制サイトに必要な機能 オウンドメディアに必要な機能 まとめ ECサイトに必要な機能 ECサイトの「EC」は、「Electronic Commerce」の頭文字をとった言葉で、「電子商取引」と訳されます。簡単に言うと、インターネット上
「SEO」は万全？基礎知識から手法まで一気に学びたい方におすすめの方法
自社サイトの検索順位を向上させるべく、サイト構造を見直したり、自社のサービスや商材に関連したキーワードを選定したり……手探りでSEOをしているというWeb担当者もいるのではないでしょうか。 しかし、SEOは一朝一夕で結果が出るわけではないため、「本当にこの方法で良いのだろうか」と感じることもあるはず。では、具体的に何から学び、どうやって対策をしていけば良いのでしょうか。 巷で騒がれているSEOのテクニックに安直に走らず、概念や基礎知識を体系的に学ぶことで自社サイトへの応用もしやすくなります。 今回は、SEOで基本的に押さえておきたいチェックポイントと、基礎知識が学べる講座をダイジェストで紹介していきます。 SEOで大切にすべき事とは？ SEO（Search Engine Optimization）検索結果で自社サイトを多く露出するための対策であり、「検索エンジン最適化」とも呼ばれています。
Adobe XDでワイヤーフレーム制作するなら知っておくべき機能｜ferret [フェレット]
Webディレクターの仕事において、非常に大きな比重が置かれるワイヤーフレーム制作。皆さんはどのソフトウェアを使っていますか？ 多くの企業のPCに導入されているPowerPointをワイヤーフレーム制作に利用している方もいるかもしれません。Adobe XDといったワイヤーフレーム作りに特化したツールを使うとより作業が楽になり便利になります。 今回は、Adobe XDでワイヤーフレーム制作するなら知っておくべき機能について特徴を踏まえつつ解説していきます。 Adobe XDとは Adobe XDは、アドビ システムズ 株式会社が提供しているアプリケーションの1つです。Webサイトやモバイルアプリのワイヤーフレーム制作、デザインに適したアプリケーションです。 PowerPointやIllustratorなどと同じ様に図形や文字、画像などを使ってページの構成、サイトデザインを作成できます。 Ado
![Adobe XDでワイヤーフレーム制作するなら知っておくべき機能｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8bc0eb4954e819f7e70ccfa075c8c16de7e2687a/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F10585%2Fog_image%2Fdefault-fa3d5d1dd26098b04b86477a87dee843.jpg)
熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話
Webページを閲覧しながら、文字がやや読みにくいな、そう感じたら、コントラスト比が弱いのかもしれません。意外に思われるかもしれませんが、彩度が高いからといってコントラスト比が十分保たれているわけではありません。 普段気にかけない(かもしれない)コントラストですが、コントラスト比が低いと問題も発生します。万人が読みやすいユニバーサルなWebデザインにするには、どうすればいいのでしょうか。 そこで今回は、熟練デザイナーこそ気をつけたい「コントラスト」に関する3つの話をご紹介します。デザイン歴が長くとも意外と見落としがちなポイントもあるので、ぜひ見直しておきましょう。 Webアクセシビリティにおけるコントラストとは？ イメージ画像 / Unsplash *コントラスト比(contrast ratio)*は、一般的に液晶画面について、最も明るい部分(白)と最も暗い部分(黒)の明るさ(輝度)の比率の
無料＆日本語化！タスク管理ツール「Trello（トレロ）」の使い方を解説！仕事で使いこなすためのアイデア付
デザイナーであればデザインカンプの作成からプロトタイプのデザイン、エンジニアであれば日々発生するバグや課題、ライターであればテーマ出しから原稿作成など、延々と仕事を追いかける日々が続いていくものです。しかし、時には仕事に追いかけられることだってあります。 タスク管理を円滑に進めてくれる強い味方に、タスク管理・共有サービスのTrelloがあります。Trello（トレロ）は「カンバン・ボード」という形式でタスクを管理するためのツールで、従来型のチェックで管理するようなToDoリストとは一線を画します。 しかし、Trelloは使いこなせば非常に便利な反面、使い方が「自由すぎる」ので*「使いこなせない」*、結果として使わなくなってしまうツールになってしまいやすいのも事実です。逆に言えば、ケーススタディを通してどのように使っているかを知ることができれば、自分に合った活用の仕方を選んで、仕事のプロセス
ロングスクロールのWebサイトが増えているのはなぜ？その理由とポイントを解説
「できるだけストレスのないUXを実現したい・・・」 ホームページをデザインするときに、誰もがこのようなことを気にかけます。 しかし、どれだけクールなデザインになっても、あるいはどれだけ使いやすくて便利なUIを設計しても、必ずネックになることがあります。 それは、ローディング、つまり読み込みの問題です。 どれだけクライアント側でページを軽量化しても、回線が遅ければローディングスピードが落ちるので、ユーザーはページを読み込むたびにストレスが溜まってしまいます。 UXデザイナーたちは考えました。 できるだけページ遷移せずにさまざまなコンテンツを読み込む方法はないか、と。 そしてたどり着いたのが、ロングスクロールです。 これまでもロングスクロールをするアプリやホームページはありましたが、以上のようなUXの観点で改めて「ロングスクロール」や「無限スクロール」のコンテンツ画面が注目されています。 Fa
href・doctype・src…？HTMLタグの読み方まとめ
Web担当者の皆様は、ページのちょっとした修正を自分で行うケースが少なからずあるのではないでしょうか。HTMLのタグや属性など、それぞれの正しい読み方を知っていますか？ 「qやa」など、一見するとどう読んでいいかわからないものが多いため、なんとなく読んでしまっている方も多いでしょう。 今回は、読みづらいHTMLタグ・属性の読み方をまとめました。読み方に自信が無い方はこの機会に不安を解消しておきましょう。 HTMLタグの読み方 1.!DOCTYPE 読み方：ドックタイプ Document Type Definitionの略。文章の先頭に記載する宣言文。 2.a 読み方：アンカー anchorの略。リンクの出発点・到達点を指定するHTMLタグ。 3.br 読み方：ブレイク Breakの略。改行を指定するHTMLタグ。 4.dfn 読み方：ディフィニション Definitionの略。定義する用語
Adobe 無料アプリ14選！
無料で使いやすいモバイルアプリが登場したことで、SNSなどで誰でも簡単にクオリティの高いグラフィックやビデオを作成することができるようになりました。 その中でも、よりレベルの高い編集技術を持つアプリを配信しているのが、Adobe(アドビ)です。 Adobeのモバイルアプリは用途に応じてクオリティの高い作品を作り出すことができます。 そこで今回は、Adobe無料アプリ14個をご紹介します。 Adobe無料アプリ キャプチャー 1. Capture CC 身の回りでいいなと思ったデザインを写真で取る。 それだけで、色、形、ブラシ、パターンなどの素材を作成することができるアプリが、「Capture CC」です。 気になるものを発見したら、Capture経由で写真を撮ります。 写真からカラーを抽出したり、トレースしてベクターシェイプに変換したり、ユニークなパターンやブラシを作成したりすることができ
自己成長の機会に！イベント・勉強会検索サービス8選
会社からの辞令や転職などで、職種が大きく変わるタイミングは誰にでも訪れる可能性があります。そんなとき、新しいスキルや知識をどこで学べばいいか、悩んでしまう方もいるのではないでしょうか。 「初心者でも気軽に学べる場が欲しい」 「似た境遇の人と交流しながら、一緒に自己研鑽したい」 そんなときにオススメなのが、様々な企業や個人が開催している勉強会やイベントです。 特にIT系の場合、毎日のように多種多様なイベントが開催されているので、自分の状況に合わせて選択できます。 ただ、イベント・勉強会の開催日をどこで検索すればいいのかわからないという方は多いのではないでしょうか。 直近で開催されるイベント・勉強会をまとめて検索できるサービスを利用すれば、探す手間を省けるだけでなく、有意義なイベントを見逃してしまうことも少なくなるでしょう。 今回は、イベントや勉強会の情報をまとめて提供しているサービスを8つご
【2016年】ディレクター必見！スマホ用グローバルナビゲーションのトレンド7選
近年、急速にスマートフォンの普及が進む中、PC版とは異なるUI・UXで、スマートフォン用に制作されたWebサイトが増えています。 これまでは「PC」が主体で制作されていたWebサイトですが、若い世代では"PCを所有していない人"も多く、スマートフォンだけで携帯電話とPC、双方を兼ねて使っているという人も少なくありません。 そのため、スマートフォンサイト（以下、スマホサイト）のUI・UXに関しても、より使いやすさというのが求められる時代になってきていて、必要とされるポイントとしては、画面が小さいため、視認性や可読性の高さ、タップのしやすさなどになります。 そこでユーザをストレスなく、目的とするページに遷移させるためにも重要となってくるのがグローバルナビゲーション（グローバルメニュー）の役割です。 今回は、実例をもとに、様々なスマホサイトのグローバルメニューをご紹介します。 各グローバルメニュ
レスポンシブ対応のCSSフレームワーク22選
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。 今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。 そんなときに便利なのがCSSフレームワークです。CSSフレーム
今年こそは！Adobe関連ソフトのチュートリアルが充実しているブログ・サイト29選
【2016/02/03 追記】一部、内容に誤りがありましたので訂正いたしました。ご指摘ありがとうございます。 デザインや動画制作など、あらゆるシーンで登場するのがAdobe製品です。 いつかは使ってみたいと思いつつもハードルが高いと感じている方も多いのではないでしょうか。 Adobeソフトはプロも使っているソフトのため、高機能で難易度が高いイメージがありますが、実際にはAdobe公式のチュートリアルをはじめ多くの解説サイトが存在しますので、これらを利用すれば充分に独学でも習得できます。 今回は、Adobe関連のチュートリアルを掲載しているサイトやブログをツールごとにご紹介します。 今年こそは使いこなしてみたい、と思っている方はぜひチャレンジしてみてはいかがでしょうか。 Photoshopのチュートリアルサイト 1.Learn Photoshop CC http://tv.adobe.com
意外と見落としがち！ホームページ制作する前にオススメのフレームワーク
今やどのような業種でもWebマーケティングは欠かすことのできない存在となり、ほぼ全ての企業が「ホームページ」を持つ時代となりました。 そのような背景もあり、CMSの登場をきっかけにホームページ作成のハードルは年を追う毎にどんどん低くなり、ブログを作るような感覚で簡単に短時間で制作できるようになっています。 しかし、制作が簡単になった分、「とりあえず作ってみて様子を見る」というような運用をされている方も少なくないのではないでしょうか。 ホームページはただ作っただけでは意味を持ちません。 今回は、ホームページ制作時に必ず踏むべきプロセスについて解説します。 ホームページにはコンセプトが不可欠 Webで収益を上げたい、インバウンド営業を強化したい、ブランド認知を広めたい等、企業としてホームページを立ち上げる目的は様々です。 ただ、どのような目的であれ、ホームページを作る時に避けて通れないのは「ど
2015年Web・デザイン界隈で浸透しつつあるデザイントレンド15選
ホームページのデザインはある程度形式化されている部分もありますが、そんな中でもトレンドの変化があります。 特に近年では、スマートフォンが普及したことによりマルチデバイスに配慮する形でデザイントレンドも変わってきました。 その時代に最適なデザインを知っておくことで、ユーザーにとって使いやすく、見た目も優れたものを作ることが可能です。 デザインの機会がある方は、常に最新のトレンドを理解しておきましょう。 今回は、Web・デザイン界隈で特に浸透しつつあるデザイントレンドをまとめでご紹介します。 2015年話題のデザイントレンドまとめ 1.パララックス・デザイン ※このWebサイトは現在公開されていません 複数のイメージ画像、パーツを速度や方向を変えて動かすことで、奥行き感を表現するエフェクトです。 別名「視差効果」ともいい、こちらも2013年頃からパララックスデザインを取り入れたホームページを目
ついつい見続けてしまう！シネマグラフを取り入れたWebデザイン24選
シネマグラフ（Cinemagraphs）という手法をご存知でしょうか。シネマグラフとは、画像の一部にだけ動きを取り入れたGIFアニメーションのことです。GIFアニメーションを使ったホームページは以前からありましたが、最近では少し変わった形で使われています。 今回は、シネマグラフを活用したオシャレなサイトと画像をまとめてご紹介します。 GIF画像を使用するため、作り方や技術自体の難易度は高くありませんし、やる気次第では、ソフトを使って自分で作ることも可能ですので、ぜひチェックしましょう。 動くシネマグラフを使ったサイト、画像まとめ 株式会社 電通クリエーティブＸ http://www.dentsu-crx.co.jp/ 株式会社電通クリエーティブＸのホームページでは、社員や文具が永遠と回るシネマグラフをデザインに取り入れています。 トップページをはじめ、企業紹介から社員紹介、リクルートページ
レスポンシブデザインとは｜今更きけない基礎知識とメリット・デメリット
この記事は2016年3月27日の記事を再編集しています 多くのホームページに導入されているレスポンシブデザインですが、レスポンシブ化することによってどのようなメリット、またはデメリットが発生するか把握できていますか？ 「Googleが推奨しているから」、「流行しているから」、という単純な理由でレスポンシブデザインを導入するのではなく、長所短所を見極めたうえで、自社のホームページに最適だと判断したうえで利用するのが良いでしょう。 今回は、レスポンシブデザインのメリットとデメリットを解説します。 レスポンシブデザインとは そもそもレスポンシブデザインとは何を指すのでしょう。 Googleは、 ユーザーの デバイス（パソコン、 タブレット、モバイル、非視覚的 ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）表示を変えること
Webサービスの作り方をプログラミング初心者が勉強した記録記事
近年、よりプログラミング言語習得の注目度が上昇しています。 インターネット上でプログラミングが学べるサービスも多数登場していますが、いざ勉強を始めてみると難しいと感じたり、興味はあるけれど敷居が高いと感じてしまうこともあります。 今回は、未経験者や経験の浅い著者がプログラミングを学んだ成果を記録している記事をご紹介します。 プログラミングをこれから学習する方にとって参考になる内容となっていますので、ぜひ目を通してみてください。 未経験者がWebサービスの作り方を学んで成果を記録した記事 1.ノンプログラマーが3ヶ月でWebサービスを作ってみた｜Qiita http://qiita.com/tabbyz/items/6513e84f319843c316d5 プログラミング関連の知識を記録、共有するサービスQiita内の記事です。 ノンプログラマーで趣味でたまにプログラミングをする程度という筆
【無料あり】おすすめのホームページ制作ツール22選を一覧比較
ホームページの制作は専門知識がなければできないと思われがちですが、実は専用のツールを活用することで、初心者の方でも簡単に作ることができます。そこで今回は、どのような制作ツールがあり、それぞれどのような特徴があるのかをまとめました。 これから事業を始める方や、自社のサービスをもっと多くの人に知ってもらいたい方は、ぜひツールを利用してホームページを制作してみてください。 ■ 関連のCMS・サイト制作ツール一覧を見る 目次 ホームページは自分で制作できる ホームページ制作ツール22選を一覧で比較 無料のホームページ制作ツール14選 有料のホームページ制作ツール5選 ネットショップ向けのホームページ制作ツール3選 無料ホームページ作成ツールのメリット・デメリット 有料ホームページ制作ツールのメリット・デメリット ホームページ制作ツールを選ぶときのポイント 機能とサポート充実の有料ツールなら「fer
コピペで実装！CSS3でオシャレなデザインのサンプルコード47選
2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
