ココだけ欲しい！Webデザインのパーツをまとめたギャラリーサイト36選
この記事は2015年10月22日に公開された記事を再編集したものです。 デザイン作業に慣れてくると、どうしても自分の癖が出てしまい、似たようなデザインばかりになってしまいがちです。特にWebデザインのパーツは、毎回同じようなデザインを作ってしまうことも少なくありません。しかし、自分が持っているアイデアだけでは、なかなか新しいデザインは浮かんでこないものです。 そこでオススメしたいのがギャラリーサイトです。その中でもパーツごとに収集したギャラリーサイトは、デザインの「部分」だけでも参考にすることができるため非常に便利です。デザインアイデアが欲しい時こそ、多くのヒントが詰まっている素材サイトを活用しましょう。 今回は、Webデザインのパーツをまとめたギャラリーサイトを36個まとめてご紹介します。 ※サイトによっては素材やソースコードなどを配布・掲載しているものもあります。ご利用の際は、必ず利用
ウェブライダー松尾氏が考える文章の「分かりやすさ」「コンテンツの質」とは
SEOライティングで有名な「沈黙のWebライティング」を執筆したウェブライダー社の松尾茂起氏。前編では文賢が目指す未来のコミュニケーションの形について聞きました。 今回は変化が許容された先にある「文章の分かりやすさ」とはどのように定義されるのかを伺いました。 ▼前回の記事はこちら▼ ウェブライダー松尾氏が目指す「文賢」によるコミュニケーションの形 アートとデザインの視点から見る「分かりやすさ」 ferret： 前回のお話を受けて、この先「分かりやすさ」というのがどうなるのか気になります。 松尾氏： 結局、「分かりやすい」というのはアートとデザインの視点にすごく近いと思っています。アートは理解されることが目的ではなく、好きに感じてもらうことが大事です。しかしデザインは理解されることが目的であって、好きに見てもらうわけではない。「こう動いてもらいたい」という導線をつくることがデザインなんです。
ウェブライダー松尾氏が目指す「文賢」によるコミュニケーションの形
今、多くの企業がオウンドメディアを立ち上げ、コンテンツを作成しています。しかし自社が訴求したいコンテンツやサービスをユーザーにわかりやすい文章で届けることは簡単ではないでしょう。 SEOライティングで有名な書籍「沈黙のWebライティング」を執筆したウェブライダー社の松尾茂起氏は校閲・推敲支援ツールである文賢をプロデュースし、多くの人に伝わりやすい文章の普及に努めています。 松尾氏は今後、文賢をさらにアップデートさせ、文字をただ校正・校閲するだけではない、「コミュニケーションをサポートするツール」を目指していると言います。記事がコミュニケーションをサポートするとはどのようなことなのか、そこから見える「分かりやすさ」「コンテンツの質」とは何なのか。ferret Founding Editorの飯髙悠太が伺いました。 松尾茂起氏プロフィール 関西学院大学 経済学部を卒業後、音楽系の制作会社に就職
サイトリニューアルにおけるUXの考え方と4つのプロセス
タスク・プロジェクト管理ツール「Jooto」の責任者の下田祐介です。2018年7月18日にサービスを刷新しました。ひとつのSaaSがどのようにしてリニューアルしたのか、そのプロセスと手法の全貌をお伝えします。 これからWebサービスをリニューアルしようとしている方にとって少しでも参考になればと思い、今回ferretに寄稿することにしました。 簡単に紹介をすると、Jootoはかんばん方式のタスク管理ツールです。ユーザー数は10万人を突破していましたが、よりスタートアップらしい成長を遂げるために、2017年9月20日にPR TIMESに事業譲渡し、すぐにリニューアルプロジェクトが始まりました。以下時系列にそのプロセスを紹介します。 リニューアルを決めた理由 調査フェーズ 分析フェーズ 情報設計フェーズ デザインフェーズ この記事で紹介するJootoのリニューアル事例をもとに、自社サービスのリニ
UXが重視される時代にデザイナーが価値を高めるには
ユーザー体験をデザインする「UXデザイン」がWebサービス業界の1つのトレンドとして語られる機会が多くなりました。 ユーザーの声がプロダクトに反映されるのが当然の時代において、UXを考慮したデザインは不可欠です。制作物を納品して終わりではなく、ユーザーやクライアントに歩み寄ってプロダクトに関わることが大切です。 しかし、その概念は理解できても、どうやって実務に落とし込むべきか悩んでいる担当者もいるはずです。 2018年6月、アドビ システムズ 株式会社が主催した「UX道場 Meetup 00：UXデザインが高めるデザイナーの価値とワークフロー」のパネルディスカッションから、デザイナーがUXデザインをワークフローに落とし込むヒントを探ってみましょう。 参考： UX 道場（UI / Web デザイン） – Adobe Creative Station 登壇者プロフィール 長谷川恭久(デザイナー
戦略的にホームページ流入を増やす！トラフィックを上げる21の方法論
ホームページのデザインを見やすいものにすることは、非常に重要なことです。 しかし、それ以上に多くの方にホームページを訪れてもらうことはさらに重要です。 つまり、それは閲覧するユーザーがいなければホームページの存在価値がゼロに等しいからです。 果たして、ホームページへの様々なサイトからの*流入を増やす(トラフィックを上げる)*には、どのようにすればいいのでしょうか。 従来はSEO(検索エンジン最適化)が主流でしたが、今では検索エンジンだけではなくSNSからの流入やダイレクト流入(URLを直接入力してサイトにたどり着く流入)など、様々なトラフィックチャネルが存在します。あらゆるチャネルからどのようにホームページへの導線を張って流入を増やすかは、Webマーケティング担当者の永遠の課題です。 そこで今回は、ホームページのトラフィックを上げるための21の方法論について紹介していきます。 コンテンツの
適用するだけでインスタ映え？クールで便利な画像フィルター系CSSライブラリ5選
現在はFacebook傘下にある、大人気の無料の写真共有サービスInstagram(以下、インスタグラム)。日本では*「インスタ」とも呼ばれ、フォトジェニックな写真をアップロードして人気を博しているユーザーは「インスタグラマー」*として注目を集めています。 クールでフォトジェニックな写真は*「インスタ映え」とも形容され、一方で2018年1月頃から、真逆の価値観として「インスタ萎え」*という言葉もプチ流行しています。インスタグラムには標準でも多数のフィルターが用意されており、こうしたフィルターで画像処理を行いながら撮られたかっこいい写真は、ホームページやブログで引用されることもあります。 しかし、わざわざインスタグラム経由でフィルターを使わなくとも、少しの手間で簡単に「インスタ映え」する方法があればどうでしょう？しかもその手間が10分未満だったら？ そこで今回は、そうした短時間であっという間
WordPressの代わりになる！2018年注目の静的サイトジェネレーター6選
WordPressを使ってブログサイトやホームページを作成しているひとは多いかもしれません。しかし、もしあなたにプログラミングの知識が多少なりともあって、SEO上も有利にしたいのであれば、静的サイトジェネレーターを使ってみるのはいかがでしょうか。 静的サイトジェネレーターを使えば、データベースが不要になり、一般的にページの読み込み速度も上がるとされています。汎用的に使えるものからシンプルに使えるものまで幅広く存在するので、用途にあったものが選べます。 そこで今回は、2018年に注目の静的サイトジェネレーターを、概要を中心にご紹介していきます。 サンプルコードなどは、参考として挙げているページをご覧ください。 静的サイトジェネレーターとは？ 静的サイトジェネレーターとは、Markdownなどで書かれたファイルをもとに、静的なコンテンツのテンプレートだけでビルドを行いサイトを作成するためのWe
コーディング初心者こそ知っておきたい便利な「CSS関数」5選
HTMLやCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。 論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLやCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。 しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。 これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。 そこで本稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきた
Internet Explorer9サポート終了！サポート終了に伴う影響と対応策を解説
Windows Vistaが*2017年4月12日（日本時間）*にサポート終了するのに合わせて、Webブラウザである「Internet Explorer 9」へのサポートも終了します。 利用者のなかには「今、使ってるソフトはInternet Explorer 9でしか使えないし、とりあえず使えるなら、そのままでいいかな」と考えている方もいるかもしれません。 しかし、サポートが終了することでホームページを閲覧している際にウィルスに感染してしまう危険性が高くなるため、企業個人問わず対策をとるべきでしょう。 今回は、Internet Explorer 9サポート終了に伴う影響と2つの対応策について解説します。 Vistaユーザーにとってだけでなく、Internet Explorerを利用しているユーザー全員が認識すべきサポート期間について、この機会に知っておきましょう。 Internet Exp
UXデザイナーと何が違う？最近話題の新しい職種「UXライター」とは？
2016年後半から、GoogleやAmazon、DropboxやPaypalなど、シリコンバレーに名を連ねるさまざまな企業が新しい職種の求人を出し始めているのを、ご存知でしょうか。 その新しい職種とは、「UXライター」(UX Writer)です。 これまでも、これに近い職種として「UXデザイナー」と呼ばれる人々は確かに存在していました。 UXライターは、UXデザイナーと一体何が違うのでしょうか。 今回は、AmazonやGoogleなどで積極的に採用している「UXライター」とはどんな役割なのかをご紹介します。 新しい職種としての「UXライター」 「UXライター」とは、シリコンバレーのテック系企業を中心に採用が始まった新しい職種です。 もちろんUXとはUser Experience(ユーザー体験)のことなので、UXライターとはユーザー体験を生み出すためのライティング業務を行うことになります。
目から鱗！ECサイトのデザインで参考にしたいギャラリーサイトまとめ
時代の変化の中で新しいデバイスやデザイントレンドが登場し、ECサイトのあるべき姿も変わってきました。そんな中でリニューアル、新規ショップを立ち上げるならギャラリーサイトでデザインの参考を探すのがオススメです。様々なデザインが揃ったギャラリーサイトは、デザイナーはもちろん、ECサイトに関わる全ての人にインスピレーションを与えてくれます。 今回は、担当ディレクター、デザイナーの方にとって必見の「ECのデザインで参考にしたいギャラリーサイト」をまとめてご紹介します。ECサイトをデザインする際に、ぜひお役立てください。 （掲載数などに関する情報は、2016年8月24日時点のものです。今後変更となる可能性がございます。） ECサイトに特化したギャラリーサイト 1.cart craze http://cartcraze.com/ 海外のECサイトのみを1700ショップ以上集めたギャラリーサイトです。大
文章作成業務が多い方は要チェック！文章校正を補助してくれる無料ツールまとめ
どのような職種でも、多かれ少なかれ文章を作成する機会はあるでしょう。 文中に間違いがないかどうかを確認する校正・校閲の作業は非常に重要ですが時間と精神力を要します。 今回は効率よく文章校正するために登録なしで使えるツールをまとめました。文章校正の参考にしてください。 Yahoo APIを利用した校正ツール オンライン上で利用できる文章校正ツールの多くがYahooのWeb APIと呼ばれるサービスを利用したものです。 そのため、以下で紹介する3つのツールの校正結果は同じになります。 ただ、使い勝手が多少異なるのでそれぞれご紹介します。 文章校正ツール http://so-zou.jp/web-app/text/proofreading/ こちらは文章を入力する方法が2種類あり、1つは直接テキストを入力する方法でもう1つはURLから読み込む方法です。 ただし、URLから読み込んだ際はサイト内の
「誰がこんなネーミングにしたんだ……。」プログラミングのネーミングルールを決める時に参考にしたい情報まとめ
サイトのメンテナンスにおいてしばしばネックになるのは、どんなネーミング・構成で制御しているのか分からなくなってしまうことです。しっかりと基準に則った、誰がいつ見てもわかりやすいネーミングでコーディングしていくことは、非常に重要なことです。 今回は、プログラマーがネーミングを考える際に参考にしたいサイトを選んでご紹介いたします。 1. codic - プログラマーのためのネーミング辞書 https://codic.jp/ 様々なサイトに紹介され、「ネーミング」で検索しても上位に表示される素晴らしいツールです。例えば、Webサイトの背景に動画を設置する際に、class名をどうしようか悩んだとします。そこでcodicに「背景動画」と入力すれば「background_videos」と提案してくれます。提案されたネーミング以外にも、その他の候補も出てきます。 考える労力を省くことができるという点で優
レスポンシブ対応のCSSフレームワーク22選
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。 今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。 そんなときに便利なのがCSSフレームワークです。CSSフレーム
無料で学べる人気プログラミング学習サイト20選
最近では、プログラミングスキル世界中で注目され、学校の授業の一部にプログラミングを学ぶカリキュラムが取り入れられているほどです。 中には、小学生向けのIT教育として、専門の学校を設け、早期のIT人材育成に取り組む企業も存在しています。 今回は、プログラミングが独学、かつ無料で自宅学習できる20サービスをまとめました。 ドットインストール http://dotinstall.com/ 動画形式で、プログラミングを学ぶことができるWebサービスです。 基本的に、全ての動画が3分で完結し、隙間時間でも学べるボリュームが特徴です。 WordPress入門 、HTML入門 、iPhoneアプリ開発入門など、2015年4月現在で220レッスン、3,132本のカリキュラム動画が視聴可能です。 schoo https://schoo.jp/guest プログラミングだけでなく、ビジネスや美容関係など幅広い
2015年Web・デザイン界隈で浸透しつつあるデザイントレンド15選
ホームページのデザインはある程度形式化されている部分もありますが、そんな中でもトレンドの変化があります。 特に近年では、スマートフォンが普及したことによりマルチデバイスに配慮する形でデザイントレンドも変わってきました。 その時代に最適なデザインを知っておくことで、ユーザーにとって使いやすく、見た目も優れたものを作ることが可能です。 デザインの機会がある方は、常に最新のトレンドを理解しておきましょう。 今回は、Web・デザイン界隈で特に浸透しつつあるデザイントレンドをまとめでご紹介します。 2015年話題のデザイントレンドまとめ 1.パララックス・デザイン ※このWebサイトは現在公開されていません 複数のイメージ画像、パーツを速度や方向を変えて動かすことで、奥行き感を表現するエフェクトです。 別名「視差効果」ともいい、こちらも2013年頃からパララックスデザインを取り入れたホームページを目
Chromeデベロッパーツール（検証モード）の基本的な使い方を解説
Google Chromeのデベロッパーツール（別名：検証モード）は、Web開発者にとって非常に便利なツールです。 特に便利なのが、スマートフォン向けの開発を行っている時の表示エミュレーション機能で、PC画面にも関わらず擬似的にスマホ画面にして表示してくれます。 Google Chromeデベロッパーツールを知っておくことで、HTML/CSSの編集やデバッグ、スマートフォンでの表示チェックが容易にできるようになります。 今回は、Google Chromeデベロッパーツールの基本的な機能と使い方をまとめました。 Chromeデベロッパーツールの使い方 1.起動方法 デベロッパーツールは、Google Chromeブラウザを使っている方であれば、誰でも無料で利用することができます。 利用方法は、調べたいページを右クリックし、「検証」の項目がありますので、それをクリックします。 ショートカットキ
意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]
コーディングする際に、何気なく重宝するコードがtableです。 そんなtableですが、コーディングしていると乱雑になってしまったり少し凝ったデザインにしようしても、いまいちと感じてしまうことが多々あります。 今回は、オシャレなtableが簡単に実装できるCSS3のサンプルコードをご紹介します。 コピーペーストで簡単に使えますので、ぜひホームページのデザインに取り入れてみてください。 コピペで使えるtableのサンプルコード19選 1.CSS3のセレクターで作るストライプテーブル http://ascii.jp/elem/000/000/462/462099/ 汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。 CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。 以前のCSS1、2の場合だと背景色を変えるのは結構手間がかかっ
![意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca6debb0b5ba0d5e0ad9cd8ecd16e993b6da81a8/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F2250%2Fog_image%2Fdefault-e58901a600c33a043330366875957445.jpg)
Webデザインは少しの工夫が重要！デザインクオリティが驚くほど向上するテクニック10まとめ
ferret編集部：2015年9月2日に公開された記事を再編集しています。 最近では、自社でWebサイトやチラシのデザインをおこなう会社も一般的になってきました。 インターネットで検索すれば参考になる情報は多数見つかるので、デザインを独学で勉強しているという方も少なくありません。 しかし、ノンデザイナーの方の場合、なかなか思うようにデザインが出来なかったり、プロのデザインと比べるとどうしても素人っぽさが抜けなかったりします。 今回は、少しの工夫でデザインがよくなるテクニックをご紹介します。 普段のデザインに取り入れるだけでぐっとクオリティを高めてくれますので、ぜひ参考にしてみてください。 細部にこだわるデザインテクニックまとめ 1.【WEBデザイン】センス不要！5つのコツを抑えるだけで脱初心者｜liskul http://liskul.com/design-skill-2777 ソウルドア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
