タグ

webデザインとWeb制作に関するkanaotakaのブックマーク (10)

  • これ知ってる?WEBの人なら押さえておきたいツール&サービス50選 - 死ぬまでWEB屋

    公開前に知人に見せたら、読むのに20分もかかったわ!! と、お叱りを受けましたw オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい! サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得

    これ知ってる?WEBの人なら押さえておきたいツール&サービス50選 - 死ぬまでWEB屋
  • 1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ

    作成:2015/08/10 更新:2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル 1.ヒアリングシート 2.WP版ホームページ制作の流れ 3.WordPress管理マニュアル 4.WP版品質チェックシート 5.Wordpress タグ タスクランナー 6.gulp 7.Bower JavaScript 代替言語/JST 8.TypeScript 9.CoffeeScript 10.Jade コーディング用 11.Chrome 開発ツール 12.html5

    1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
  • WEBデザインが独学で身につく!WEBデザイナー必見の神サイト20選

    2023年2月17日 Webデザイナー1年生はもちろん、Web製作に携わるものなら絶対に知っておきたい神サイトを完全収録しました。 独学でWebデザインを勉強したい人、優秀な先駆者たちの知恵を吸収し飛躍したい人は要チェック。 WEBデザイナー必見の神サイト20コリスWebクリエイターボックスコムテブログかちびと.netバンクーバーのうぇぶ屋ホームページを作る人のネタ帳creive【クリーブ】BlackFlagDesignDevelopArchAteitexe アテークゼウェビメモWebparkNxWorldデザイナーのイラストノート株式会社LIGMdN Design InteractiveドットインストールProgateschooコリス コリス サイト制作に関する最新の情報をご紹介 サイト構築、WordPressのTipsを得られます。ただし、Webデザイナー1年制が、今からの更新情報を受

    WEBデザインが独学で身につく!WEBデザイナー必見の神サイト20選
  • Webコンテンツの成果が上がるレイアウトの法則とは? | 誰も語らなかったWebコンテンツ作成技法

    優れたコンテンツ構成の鉄則を探る!優れたコンテンツとは顧客の悩みを解決できるため、検索やお気に入りから訪問者を獲得できます。そして、そのコンテンツは別のページに誘導する力があり、しかもゴールに結びつける力があります。 前回説明したように、こうしたコンテンツは、天才的なアイデアや人並みはずれた文章力で作られるのでしょうか。実際にはそうではありません。普通のビジネスパーソンが、普通に考え、普通の文章力で作ったものが成果を上げているのです。 意図的ではない分、成果が小さいことがもったいないのですが、これを意図的に行っていけば、狙った成果をより大きなものにできるはずです。それでは、コンテンツの成果が上がる構成とはどんなものなのか解説していきます。 コンテンツの見出しは画像を使わず2行のテキストで作る前回説明したように優れたコンテンツは、検索集客力が高く検索から顧客と出会う力を持っています。検索から

    Webコンテンツの成果が上がるレイアウトの法則とは? | 誰も語らなかったWebコンテンツ作成技法
  • 背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス

    レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が[一般に〔米〕では Whiskey,〔英〕では Whisky.]であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご

  • How to Create Website Wireframes

    2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基の流れはちゃんと説明していないな…ということで、「連載!実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その3 目標:わかりやすいワイヤーフレームを作成することができる 必要なもの:紙とペン 対象レベル:超初心者OK

    How to Create Website Wireframes
  • パララックスサイトの作り方の初歩

    最近パララックス(視差効果)を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量:" + y);//表示用 }); }); サンプルペー

    パララックスサイトの作り方の初歩
  • 食品販売サイトで重要な見るだけで食べたくなる質感「シズル感」 |https://wp.yat-net.com/name

    シズル感のある写真を使ったECサイトでは通常の写真よりも購買意欲が注がれます。実際僕自身過去にECサイトで販売していて売れなかった商品も、写真を撮影し直すことで売れたという経験もあります。 それを体験しているからこそ、僕自身ECサイトで写真は大事だと考えています。飲関係に至ってはとくにこのシズル感が出ているか否かは非常に大きなポイントになってきます。 同じ材を販売するにしても、訪問したユーザーの多くは「美味しそう!」と感じるから買おうと思うのであり、ただ安いからという理由で買うわけではありません。 ただ安いから買うというのは、その商品をすでに知っているから買うのであって、まだそれを知らない人からすれば安いという理由だけだと「なぜ安いのか?」という考えを引き起こす事になり得ます。 ユーザーが商品を見て、買いたいと思うまでにいかに余計なことを考えさせないか。これは購買意欲を購買につなげる大

    食品販売サイトで重要な見るだけで食べたくなる質感「シズル感」 |https://wp.yat-net.com/name
  • Google+ページを作成する方法 - AkicanBlog

    Googleページとは 2011/11/08 3:00にリリースされたGoogle+の待望の新機能です。Google+ページを作成することによって、企業はSNS上でビジネスとしての展開が可能になります。例えば、新商品の紹介や、サービスの宣伝など、Google+ページはビジネスにおけるSNSの新しいカタチを提供してくれます。 Google+ページを作成する Google+ページを作成するには、すで作成されたGoogle+ページのサイトにアクセスします。 no title ここにアクセスしてみましょう。これがGoogle+ページで作成されたページです。 このページの左下に「Google+ページを作成」というボタンがあるのでこれをクリックします。 また、Google+のトップページ右カラムのメニューからもジャンプすることができます。 カテゴリを選択する クリックするとこのような画面が表示されます

    Google+ページを作成する方法 - AkicanBlog
  • ユージック|スマフォサイトなど

    Adobe Expressが便利 2024年2月8日WEBデザイン これまでデザインツールはPhotoshopやillustratorを使っており、最近であればAdobe XDやFigmaを使っていたのですが、SNSの定型画像、動画を扱う際は不便な事がありました。また素材についてもストッ […] WordPressのJSONレスポンスエラー対策【WAFチューニング編】 2024年1月31日WordPress WordPressで記事を保存した時などに以下のような「更新を失敗しました。返答が正しいJSONレスポンスではありません」といったエラーが出て記事を保存できないケースがあります。 この記事の内容エラー内容発生する状況原因 […] 送信ドメイン認証(SPF、DKIM、DMARC)とは 2024年1月19日アウトプット 近年なりすましメールの被害が拡大していることからGoogleは2024

    ユージック|スマフォサイトなど
  • 1