Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
クリエイターの作業をラクにする最新Web、オンラインツール33個まとめ
クリエイターの作業をラクにする最新Web、オンラインツール33個まとめ これからはこれだ、次世代の便利ツールが大集合 「こんなツール、あったの？」と思ってしまう、話題の最新オンラインツールをまとめてご紹介します。 デザインのインスピレーションが欲しいときや、やりたくなり面倒な作業を一発完了したり、時短にもつながる便利ツールが揃います。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. デザインツール 2. Webデザイン便利ツール 3. モックアップ・UIツール 4. アイコンツール 5. クリエイティブ・面白ツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ デザインツール Ukiyoe Stock 4,200以上の和風、浮世絵イラスト素材を集めたサイト、他の無料イラストサイトと一緒にいかがでしょう。 Palet
図で理解する Flexbox
Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 ※ CSS Grid についても整理してみました Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。 コンテナ・アイテム Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item">２</div> <div class="item"
デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント｜Tomoyuki Arasuna
webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c569bf6868b0e2cd70822921c201208292c30537/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20190528%2F20190528165147.png)
ぼくのかんがえたさいきょうの配色Webサービスを公開した話 - Qiita
TL;DR まあぜんぜん最強ではないですが、自分好みの配色 Web サービスをつくってみました yum-yum COLOR 個人で公開まで作りきったのは初めてでしたので、色々とつまずきました そんなつまずきポイントや、 Web サービスを公開するために利用した技術などを紹介していきます ❗ なぜ配色サービス ❓ 色彩検定という資格をご存知でしょうか？ 僕はプログラマーなのに 色が好き で、この試験を受検しました。 その学習をしてる時にこんな風に思ったのです。 この色相環、これを使って配色選べたら便利じゃない？ あっ、このトーン、これを使って配色選べたら便利じゃない？？ と。 受検勉強の追い込みをしないといけないのに、そっちのけで作り始めてしまった...というわけです （一時はどうなるかと思いましたが、無事に検定は合格しましたよ 🎉 ） どんなサービスなの ❓ 使い方 色相環 と Hue
WEBライターが教える「読みやすい文章」を書くためのライティングのコツ | ayan's style
ayan's style > サイトコンテンツ作成 > WEBライターが教える「読みやすい文章」を書くためのライティングのコツ 私はブロガー13年目、最近はWEBライター／旅ライターとしての仕事もしています。 先日、「視点の違いで作り出せるものは変わる！ 新たな視点を獲得する方法」という記事を書きました。読んでいただけるとわかるのですが、書籍のレビューを通常とはちょっと違う切り口で書いた文章となります。 通常は書籍のレビューというと、「○○という本を読みました。その本は…」と、まず本を最初に持ってくると思うのですが、今回はすでにネット上に同じ書籍のレビューがたくさん公開されている状態だったため、最初に本のことを書かず、文章の後半で自然な形に本の内容に触れられる構成を意識しました。 この記事を公開した後、その文章の書き方について、まわりのブロガーさんから以下のようなお言葉をいただきました。
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
最初に設定しないと絶対損する！Google Analytics 9個の必須設定＆解説 | Find Job ! Startup
アクセス解析は最初の解析設定が命。「やっておけばよかった！」と後悔しても、設定し忘れた集計数値はもう2度と手に入りません。 Webサイトの財産とも言える解析データをしっかり取得してビジネスの成長につなげるためにも、必ず設定しておきたいGoogleアナリティクスの必須設定項目をまとめました。 もし抜けがあるようでしたら、この機会に設定してみて下さい。 ※現時点で、アナリティクスの設定は標準・ユニバーサルの2種類があります。ユニバーサルは、まだ不完全なので今回は「標準」での設定をベースにご紹介します。 【設定1】プロパティ＆プロファイル まずはサイトの運用方針などに合わせて、的確にプロパティとプロファイルを設定します。 基本的には「サイトごとにプロパティ」設定がおすすめ いくつものサイトを『それぞれ別のドメインで展開』する場合や、サブドメインでそれぞれのサイトを管理する場合、基本的に
WEB制作時に役立つ！ダミーテキストに使える定型文まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、弊社プログラマーの段田さんのブログで、ボーナスアップの道具として利用された野田です。 あれは、久しぶりに傷ついた。 そして、プライベートでもいろんな人にいじられた。 ネットって怖いですね。 さて、今回は、WEB制作に役立つ定型文のご紹介を致します。 僕自身、デザインする際に構成からガッツリ考えるのが大好きっていうか仕事なので、 それにあわせてダミーテキストを考えることが多いです。 デザインを提出する際には、「テキストテキストテキスト」や「ダミーダミーダミー」で提出することは絶対にしません。 お客様の意図を読み取ってこちらからご提案させていただくということも、Webデザイナーには必要なスキルの一つだと思うからです。 あたりまえなことですが、こういう部分に気づかない方も案外いらっしゃいます。 正直、僕もデザインを始めてすぐの頃にはそんな感じでした。 「仮」という言葉に甘えてしまう事は良く
たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS – @attrip
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
月315円から使えるインフラサービス Gehirn Web Services がステキで恋に落ちるレベル。 - このブログは証明できない。
あと1ヶ月もすればもうクリスマスだ。そしてまた1年と1ヶ月もすれば来年のクリスマスだ。アレも欲しい、コレも欲しい。でも、本当に欲しいモノって何だっけ？欲しいモノを聞かれて、すぐに答えていた子供の頃。歳をとるほどに、自分の欲しいモノがわからなくなる。そしてプレッシャーがかかると、思わず「からあげ」と答えてしまう。僕の欲しいモノは何なんだろう。 そうだ。サーバーだ。サーバーが欲しかったんだ。僕はずっとサーバーを探していた。昔はRailsが動くレンタルサーバーなんてなかった。専有サーバーを借りるお金などなく、ロリポップの525円の共用サーバーは当時としては珍しくRubyのCGIが動いたので、妻名義で申し込んで（ごめんなさい！）、RailsをCGIモードで動かしては画面遷移するたびに10秒くらい動かない画面を見つめたりしていた。最近は、ServersMan@VPSが490円で使えて安いんだけど、や
色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ | 高橋文樹.com | デザイン
この投稿は 11年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 前回の記事に続き、僕と同じくデザイン力のない人のためのサバイブハウツーです。Webサイトを作っていると、デザインをしなくてはならないのですが、その際にとても困るのが色の決定です。 色使いというのはとても大事なもので、「ダサいなー」と思われる理由のトップクラスに位置するものです。デザインというのは上手くいっている場合は気づかれず、失敗したときに目立ちます。 みんな大好き愛生会病院 僕はいままで某大手企業の研修や某デジハリなどで沢山の初心者を見てきましたが、確実に言えることは99%の人に色彩センスはないということです。「好きな色決めてね」というと、99%の人がクソのような色を使ってきます。これは当人がダサいかダサくないかにかかわらず、99%色彩センスがありません。 Webで色彩
売れるECサイトを作るためにチェックしたいEC・WEB情報サイト16個まとめ – MARS DESIGN Co.,LTD.
ECサイトを無料で作るオープンソース5選＋3！ 自社ECサイト制作に必要なパッケージまとめ 38,129 views 良い企画書をマネることから始めよう！大手企業が行うプロモーションの企画書事例まとめ 16,680 views 今更聞けないマーケティングの基礎が勉強できる便利な５サイトまとめ 13,238 views 0.1秒の遅れが、1%の売上に影響する!? ページ表示速度の影響力と改善法まとめ 11,779 views 脱初心者！事業計画書の書き方やテンプレート配布サイト4選 11,335 views 売上アップに必要不可欠！販促企画書のアイデアを貰えるサイト5選 8,661 views あなたのサービスが広まる、エレベーターピッチ！ 7,625 views 困った時に使える14パターンの無料名刺デザインサンプルデータ 7,425 views WordPressの導入からデザイン、プラ
WEBデザインがレベルアップする記事まとめ * prasm（プラズム）
今知りたいコト、僕が知りたいコト、教えます。@shintarowfreshです。 あー、違う違う、上からじゃないよ、マジでマジで。 今すぐ取り入れるべき素敵すぎるネタ達です。是非一読あれ！ 魅力的でワクワクする最新のエフェクトを使ったウェブサイトのまとめ | コリス 今知りたいネタがもう、満載。 あー、ほんとワクワクするわ。なんだろうな、やっぱパララックスすきっすわ。ほんと。わくわく感が半端ない。 この記事を読むだけでレベルアップできる素敵な３つのWebサイトの使用技術を分析&実践してみた | Webクリエイターボックス これは素敵。マジで素敵。 最新の技術をメチャクチャわかりやすく解説。 いいんですか？？？ 画像を文字でマスクするとか、マジスカ？？ しかも、意外と簡単なのね。 と、目を通してブクマするなりエバノに放り込むなり光の速さで永久保存しチャイナよ。 素敵な３つのWebサイトの使用
あなたが作ったサイトのフッターの役割は？12のフッター活用方法！
昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ
「Webサイト改善は図を描きなさい！」 〜 SiteCatalyst達人から教わった分析フレームワーク-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
TOP > 「Webサイト改善は図を描きなさい！」 〜 SiteCatalyst達人から教わった分析フレームワーク こんにちは。マーケティング担当の伊藤大地です。 先日、米AdobeでWeb解析ツール「SiteCatalyst」のプロダクトマネージャープログラムマネージャー（初出時、役職を誤って表記しておりました。お詫びし、訂正いたします）を務めていらっしゃる清水誠さんが、一時帰国された折に弊社に遊びに来てくださいました。たっぷり2時間、最新Webマーケティング事情やWeb解析についてお話を伺いした中から、WebのKPI測定・改善サイクルとそのノウハウについて、エッセンスをお伝えしたいと思います。 清水さんが提唱されているWeb改善のフレームワーク「コンセプトダイアグラム」という手法は、主に3つのプロセスから成り立っています。 ユーザー視点でサイトを図解し、コンセプトを明確にする サイトの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ | コリス
Flipsblog.jp
cmmntr.com