Web制作の時短に！2020年の便利オンラインツール・ベスト100選
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
遊べる！海外のヤバイサイト紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まろCです。 サイトの進化がヤバイです。 日々インターネットをパトロールしていると大きな驚きに出会います。 今回は、遊べる！とおもった海外のサイトをご紹介したいと思います。 紹介の基準は、マウスでグリグリしたり、WebAPIを使っていたり、WebGLを使っていたりと、エンジニア視点での「遊べる」です。 さっそく見てみましょう！ peekabeat https://peekabeat.com/#!/ ブラウザのカメラを使って顔認識し、気分を判定。その表情に合うSpotifyの音楽を紹介してくれます。iPhoneアプリもあるみたいです！ 実際にやってみました！ 顔認識してます。。。。 結果は……surprise? 驚いてるっぽいです! Airman Challenge URL: https://www.airforce.com/airmanchallenge/ アメリカ空軍のスペシ
ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist
Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで
これからのWeb制作に役立つ、69個の有益で大切なポイントのまとめ -69 Website Design Tips
Web制作のデザイン、ユーザエクスペリエンス、コンテンツ、制作・開発、そしてこれから必要もの、避けておきたいものをまとめた「69 Website Design Tips」を紹介します。 ターゲットとなるビジターを調査するのが重要 カラーは2, 3色をベースに、多色が必要なら明度に変化をつける ロゴは、デザインされた高品質なものを使う コンテンツが魅力的でも読めないテキストでは意味が無い 要素が減った時増えた時のことも考えてデザインする 既製のデザインを使うのではなく、ターゲットに適したデザインをする 構造化されたデザインにはグリッドが便利、汎用性の高い12カラムがお勧め 重要な要素を目立たせる時は、必要のない要素を取り除いてシンプルにする トレンドの使いすぎはよくないですが、10年前のデザインを使用するのはもっとよくないです デザインはオリジナル性を大切にします、既製をそのまま使うと他のサ
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
Webサイトのデザインの作り方 Webサイトデザインの基礎の基礎 - 久保清隆のブログ
Webサイトのデザインをする流れについて、色彩検定の勉強で学んだことを活かしつつまとめてみた。 準備 サイトの目的を確認する 何かを売りたいのか、情報を発信したいのか、など何の目的でサイトを作るかをはっきりさせておく。目的によって、カラー、ロゴ、ナビゲーションなどのデザインやコンテンツが決まる。 訪問者、利用者の属性を見極める 目的によって、訪問者、利用者を推定できる。ターゲットを明確にしておく。 ターゲットの性別、年齢、職業、住まいなどの属性によって、色、書体、ビジュアルテーマなどが決まってくる。 情報を整理 まずは、作成予定のコンテンツを全て洗い出す。 そのコンテンツを以下のような項目で評価する。 更新頻度：よく更新されるものか。すべきものか。 プッシュ性：アピールしたい項目か。 実用性：使って便利な機能か。 話題性：時代、流行に合っているか。目新しさはあるか。 テーマ性：サイトのコン
ブログデザインを参考にしたいブログ8選（はてなブログ編）。文章の読みやすさからサイドメニューの装飾まで、参考になるデザインばかり。 - クレジットカードの読みもの
今回は私がブログデザインをする上で、参考にさせてもらっているブログまとめです（はてなブログ編）。 これらのブログは常にデザインに気を使って運営しているブログばかり。ブログの肝は記事の質かもしれませんが、人気ブログにしていくためにはブログデザインを強化することも同じくらい重要なので、是非、みなさんも参考にしてみてくださいね。 お薦めのブログデザイン5選： １．はぁはぁブログ： ２．AIUEO Lab2： ３．はなこのブログ ４．それ、僕が図解します。 ５．おうつしかえ： ６．しっきーのブログ： ７．マトリョーシカ的日常： ８．HSKぐうたらジャーナル： 今後もデザインを改良していきたい： グローバルメニューを実装予定： 文末リンク： お薦めのブログデザイン5選： １．はぁはぁブログ： はぁはぁブログ はてなブログはここまで改良できるのか？というくらい、細かいところまでデザインが作りこまれてい
Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんどうも〜こんにちはぁ！ 日々レベルアップを目指してWebを学んでおりますライターの、のび太です。 以前「Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個」という記事を書かせていただいたのですが、予想以上に好評で驚きました。お役に立てて光栄です！ そのときご紹介したブログの他にも、まだまだ有益で素晴らしい国内ブログはたくさんあります。そこで今回は、「やばい！ マジで有益すぎる！ ありがてぇ！」と感じたブログを、制作系とSEO系とに分けて、計10個ほどご紹介したいと思います。 今まで知らなかったという人は、ぜひこの機会にRSS購読を！ 制作系 以下7ブログが、デザイン、コーディング、CMSなど制作系の内容になります。 NxWorld http://www.nxworld.net/ どの記事もシンプルかつ丁寧な説明で非常にわかりやすいです。特にWordPressカスタマイズ系の
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
[CSS]画像にキャプションをさまざまなCSS3アニメーションで表示するスタイルシート、コピペで簡単に利用できます -iHover
デモページ：スクエア iHoverの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 ※スクリプトは不要です。 <head> ... <link href="styles/ihover.css" rel="stylesheet"> </head> Step 2: HTML 基本的にはノーマル時に表示するサークル（スクエア）とホバー時のものをdivで内包します。細かい点が各デモごとに異なるので、それぞれのデモページを参考にしてください。 Effect 1だと、こんな感じです。 <div class="row"> <div class="col-sm-6"> <!-- normal --> <div class="ih-item circle effect1"><a href="#"> <div class="spinner"></div> <div cl
新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版！
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
売れるサイト作成に必須！たった４つのWEBデザインの基本法則
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. インターネットをビジネスに活用することが当たり前になり、競合他社がひしめく現在のWEB市場において、WEBデザインは以前よりも遥かに重要性を増している。 なぜなら、WEBデザインそのものが、コンバージョンを大きく左右する要素の１つとなっているからだ。 しかし、デザイン的に素晴らしいスキルを持っているデザイナーは数多くいるが、デザインとコンバージョンの双方にフォーカスしているデザイナーはまだまだ少ないように思う。 そこで、本日は、私自身の経験から、WEBデザイナーの方にも身につけておいて欲しい、コンバージョンを生むためのWEBデザインの考え方をシェアさせて頂こうと思う。 それでは、早速始めよう。 また、私たちバズ部は12年で400社以上のメ
フリー写真素材サイトまとめ15選
こんにちは。学生ライターの池澤章太です。 Webで記事を書くときや資料を作るときに、フリー写真素材をよく使うと思います。しかし、イメージに合う写真や素材を見つけるってなかなか大変です。場合によっては商用利用できるか調べるなければいけませんし。 そんなときに、商用利用ができて、無料で使える素材サイトがまとめてあると便利ですよね。 ちなみに動画素材については送別会、結婚式に！映像制作に使える無料動画素材サイトまとめをご覧ください。 今回は、23個ほど素材サイトをまとめました。この記事をブックマークしておけば素材に困ったときに役立つはず！ 【こちらもおすすめ】 無料で商用利用OKのサイト特集 商用利用できるフリー写真素材サイトまとめ23選 ここでひとつ注意を。「フリー」という単語は、なにかと誤解を招きやすいですが、著作権がフリーだったり、クレジット表記が不要だったりする意味ではありません。各素材
GWはじっくり腰を据えてスキルアップ！おさらいして読みたい、技術系お役立ち記事まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、GW前半に意を決して体組成計を購入し、体重・BMI・体脂肪率、内臓脂肪など、数々の恐ろしい数値があらわになったメディア事業部のあゆみです。体内年齢は27歳（実年齢＋2歳）…恐怖のあまり、即スポーツジムに入会しました。痩せよう。 さて、今年のGWはお休みが前半、後半と分断されていて遠出するか悩ましいカレンダーですよね。 そこで「中途半端にまとまったお休み、どこかに行く気力もお金もないし、どこに行っても混んでるからもう引きこもるに限る」という方にぜひ読んでもらいたい、LIGブログの技術系記事をピックアップしてみました。ゴロゴロするだけじゃもったいない！GWの時間を、知識・技術のレベルアップにあててみませんか？もちろん旅行や帰省の際の移動時間にもおススメです。携帯でも読めますので！（きっとPC開きたくなっちゃうだろうけど） WEBデザイン 必読！5分でわかる流行のレスポンシブWebデ
美しいWebデザインをタイプ別に！見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
