サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
wk-partners.co.jp
最近、オンラインブックマークを、GoogleブックマークからPinboardというサービスへ乗り換えました。 今回はその乗換方法やサービスの内容をご紹介いたします。 Googleブックマークを使用していた理由 理由はとっても簡単で、シンプルで、目的のブックマークが探しやすく、使いやすかったから。国産だと「はてなブックマーク」が一番有名ですよね。国内での使い勝手の良さを考慮すると、はてなブックマークでも良かったのですが、単純にGoogleのアカウントと連動していると(ログインとか)便利でしたので、Googleブックマークを使用していました。 なぜ乗り換えようと思ったのか 私は普段からRSSリーダーにiPhone&iPadのアプリの「Reader」を使用しています。 「Reader」は気になった記事をサクッとSNSに投稿したり、ソーシャルブックマークサービスでシェアしたりできるんですが、「Re
引用符ジェネレーターは引用符『>』を行頭に付けるツールです。メールやマークダウン記法などの引用テキストがコピペで自動的に出来上がります。
リニューアル後、 100%のクライアントが、 アクセス数アップに成功する理由。 お客様の漠然としたご要望に対しロジカルな打ち手をお返しします。 御社でも中小〜大手まで多くの企業をお手伝いしてきたノウハウを活かしてみませんか?
サイトのメインビジュアルで動画がを再生するのは最近のトレンドとなっています。 今回はさらにアレンジして自動再生動画を使ったスライダーの作成に挑戦してみました。その際の知見をご紹介いたします。 <ul class="slider"> <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-123540.mp4" autoplay loop muted></a></li> <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-2629-1.mp4" autoplay loo
Dialogflowとは 今回ご紹介するDialogflowは、Google傘下の開発元による、チャットボットを簡単に作成できるAIエンジンです。ユーザーが入力するテキストや音声をAIが解析し、その内容に応じて、事前に設定した応答を返してくれたり、受けとったキーワードをデータベースに連携してくれます。もともと「api.ai」の名称で開発され、2016年にGoogleの一部となりました。 類似のサービスには、IBM Watson Assistant、Microsoft Azure bot service、Amazon Lexといった大手によるものがあります。その中でもDialogflowの特徴には、 コーディングなしでチャットボットの設定が可能 デバイスやプラットフォームを問わない連携先 日本語、英語をはじめ、20以上の言語に対応 といったことが挙げられます。また、Googleの傘下というこ
visual studio code(VSCode)は、Microsoft社が開発したテキストエディタです。visual stuido codeには、開発の際に使えるさまざまなプラグインがあります。今回は、その中でもおすすめのvisual stuido codeのプラグインを紹介します。 visual studio codeのプラグインの利用方法 まずプラグインをインストール・有効・無効化・削除する方法を見ていきましょう。 プラグインのインストール方法 プラグインの利用は、画面左中央にあるExtenstions内で行います。 プラグインのインストールは、まずExtenstionsの検索ボックスで、利用したいプラグイン名・プラグイン名の一部を入力して検索しましょう。例えば「Live Server」をインストールしたい場合に検索ボックスで「Live」と入力します。 検索結果に自分がインストール
Strapiは話題のHeadless CMS Headless CMSとは? Headless CMSは、コンテンツ管理などのバックエンド機能のみを提供するCMSです。 ユーザーに直接提示されるビュー=フロントエンドを管理せず、APIを通してコンテンツを受け渡します。そのことで、フロントエンドの自由度が上がり、開発効率の向上も期待できます。 最新技術を用いたウェブサイトはもちろん、スマホアプリ、デジタルサイネージなど、様々なプラットフォームと連携させることが可能です。 Headless CMSについてはこちらの記事で詳しく説明しています。 Headless(ヘッドレス) CMSとは? 代表的な10のCMS比較! Strapiのメリット Headless CMSの中で、近年注目を集めているのがStrapiです。 コーディングなしでも簡単&高速にAPI開発が可能な、Node.jsベースのCMS
2020年、Flashがついに終了 Adobe Flash Playerが2020年末をもって開発・配布を終了することが決まっています。かつてはWebアプリや、アニメ表現、ブラウザで動作するゲームなど、リッチなWebコンテンツに欠かせなかったFlash。スマートフォンでの動作に向かないとされたことから、徐々にシェアが低下し、開発終了に至りました。 かつてFlashで作られていたものも、今ではHTML5、CSS3をベースに、JavaScriptやPHPなどを駆使して作られるようになり、新しいフレームワークや技術、言語仕様なども日々アップデートされています。今回は、エンジニアでなくとも、Webにかかわる方に知っていただきたい、2020年1月時点のCSS、JavaScript、PHP最新動向をご紹介していきます。 W3Cが方向性を決定 CSSはブラウザごとにそれぞれ実装されているため、ブラウザの
初めてコーディング作業するときに、どのコードエディタを選べばいいのか迷いますよね。 既にコーディングをしている方は、先輩や上司に教えてもらったものをずっと使っている方も多いでしょう。他にも教材や本でエディタが指定されている標準テキストエディタを使い続けている方もいるのではないでしょうか。 今回は初心者におすすめのコードエディタはもちろん、mac/widows対応のエディタ、オンラインで使えるエディタなど、効率的にコーディングできるおすすめのコードエディタを紹介します。 コードエディタの特徴3つ 1.効率的にコーディングを行える コーディングを行うために開発されたアプリケーションのため、個人に合ったカスタマイズをすることが可能です。 「コード入力補助」「行末の空白表示」「ショートカット入力」などコーディングする際に重宝される機能を揃えているエディタは人気です。 2.コードを理解しやすい コー
↓動画でも解説しています。 Headless CMSとは? 近年、目にする機会が増えた「Headless CMS」という単語。この記事では、Headless CMS、関連技術、人気のサービスなど、導入に向けた基礎知識をご紹介していきます。導入のためのイメージ作りになれば幸いです。 キーワード1:CMS(Content Manegement System) CMS(Content Manegement System)は、コンテンツ、ファイル、ワークフロー、リポジトリなどの情報を管理・公開するシステム。身近なところでは、WEBメディアの記事、企業サイトの各ページ、ECサイトの商品情報などの管理・公開など幅広く使われています。 画像などのファイルや、投稿の変更履歴、権限の管理など、様々な機能を技術者でなくても利用できるのが特徴です。 CMSを代表するのがWordpress。 2003年にリリース
Vue、React、Angularの似ているところ 仮想DOMの活用 分割・再利用可能なコンポーネント リアクティブシステム 軽量なコアライブラリ まとめ Vueは後発なので、他のフレームワークのいいところを積極的に取り入れています。厳しくルールを決めすぎない方針があり、小〜中規模開発には向いています。そのぶん大規模開発では注意が必要です。 基本:Vueを使ってみよう さて、そろそろ実践にうつりましょう。Vueを導入するには、HTMLに下記のタグを追加するだけです。 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 読み込み完了! ここからは、郵便番号を入力すると、それにマッチする住所が表示される、という仕組みを作ってみます。まずは完成形をお見せします。 See the Pen Vue & axios
サイトギャラリーサイトなどでよく見かけるSVGアニメーションを使ったサイト。サイトのアクセントや世界観の構築に非常に有効な手段ですよね。何よりかっこいい! 以前ブログに書いた記事のようにモーフィングやラインアートのSVGアニメーションは比較的カンタンに実装できますが、今回はひと手間を加え、実践で使えるかっこいいアニメーションに挑戦してみました。 サイトに何か個性を出したい・目を引くポイントを作りたいなど考えている方は是非ご覧ください。それではどうぞー!! 実践的なSVGアニメーションの作り方 イラストを作成 まずはベクターデータのイラストを作成します。今回は張り切って「ノートパソコン・紙・iPhone」のイラストの3点を作成しました。こんな感じです。 私はAdobe Illustratorを使用して作成しましたが、SVGに書き出せれば他のツールでも問題ありません。 SVGデータとして書き出
私たちはホームページ制作会社(株式会社ウェブ企画パートナーズ)ですので普段お客様の採用サイトを制作させていただく機会が多いのですが、今年見かけた「2020年度 新卒採用サイト」のうち、デザイン性やコンテンツに優れているサイトを19サイトピックアップしてみました。また最後に今年の傾向のまとめをご紹介しています。(順不同) ※2022年度版も公開しました! https://wk-partners.co.jp/homepage/blog/hpseisaku/webdesign/recruit2022/ 疾走感とエネルギッシュの融合(日清食品) https://www.nissin.com/jp/recruit/nissinfoods/index.html まずサクサクと流れていくムービーが目を引きます。単に職場の様子を撮影した動画などよりも効果的に思えますね。ムービーの終了後は疾走感のあるメッセ
React って何? React とは UI を作ることに特化した JavaScript のフレームワークです。以下のようなリッチな表現の時間選択のための UI も React を使って実装されていて、 react-gradient-timepicker というライブラリ名で一般に公開されています。 そのほかにも、日付選択のためのカレンダー形式の UI や Slick のようなカルーセルの UI も公開されています。React はこういった複雑な UI を作ることが得意なフレームワークです。 ただし、React を使うと、こういった UI が簡単に作れるようになるというわけではなく、JavaScript やプログラムのある程度の知識は必要になってきます。 HTML と JavaScript が合体した JSX 記法 React の特徴として JavaScript 内に HTML の様な独自
こんにちは。私は弊社「株式会社ウェブ企画パートナーズ」が運営中である「女性の美学」のInstagramの運用担当者です。 現在(2019年5月)のフォロワー数は7万ちょっと。まだまだ大手アカウントとは言えない状況ではありますが、0からのスタートを考えると少し感慨深いものがあります。 アカウントを開設したのは、今からちょうど1年ほど前。 フォロワー数を増やすにあたり、何度か壁を経験し、その度に工夫を凝らして乗り越えてきました。 そこで今回はフォロワー数1万を超えるまでに工夫したことを、同じような状況でもがいている運用者さんのために共有できればと思います。 フォロワー数 0〜2,000 時期 サイト自体のアクセス数がそれなりにありましたので、読者が勝手にフォローしてくれるだろうという甘い考えでした。 今だから白状しますと、この頃は作業でやっていたと思います。とにかく「毎日投稿すればいつか1万フ
ブログなどウェブで写真を利用する際、iPhone のようなスマートフォンでしたら写真加工アプリなどでオシャレに加工できますが、パソコンで加工して文字も入れて、でもそれだけのために Photoshop を購入するとなると、ためらってしまいます。 そこで、簡単に写真を加工できるソフトが今回ご紹介する「PhotoScape X」です!!! とご紹介しようかと思ったのですが、実はこのソフトウェアを利用したきっかけは画像分割でした。 どうしてもウェブ関係の仕事をしていると縦長のスクリーンショットを扱う機会が多かったりするのですが、それがパワーポイントに載りきらなかったりするんですよね。 その度に Photoshop を起動して、縦のピクセル数を計算して、3分割にしたり4分割にしたり、という作業を行っていたのですが、これが毎月レポートの度となると少々しんどくて。 そこで一発で2分割でも3分割でも4分割
ブラウザ対応状況に伴い、css3の「mix-blend-mode」を使い、テキストや画像にブレンドモードを適用しているサイトを多く見るようになってきました。 今回はその「mix-blend-mode」について使い方や実際の効果などをご紹介します。 ブレンドモードとは? 普段からPhotoshopなどのグラフィックツールを活用している方にとってはお馴染みのブレンドモードですが、知らない方のためにブレンドモードについて説明します。 ブレンドモードは描画モードとも言い、PhotoshopやIllustratorなどのAdobe系のソフトで、昔からある機能の1つです。 ブレンドモードでは要素と要素を重ねた時の表現を指定することができます。重なる部分のコントラストを強めたり、弱めたり、暗くしたり、明るくしたり色を反転させたりと様々な効果をブレンドできます。 ブレンドモード:「乗算」 例を出してみまし
対応方法について 基本的には WebP 画像を作成後、 img タグに直接 .webp のファイル名で記述すれば対応できるのですが、 <img src="xxx.webp"> WebP に対応していないブラウザもあるため(特に Safari)、従来画像と共存させる必要があります。 共存させることを前提とした場合、今の時点での対応方法については大きく2種類が考えられます。 1,picture タグを使う 2,htaccess で制御する 結論から言うと、htaccess での対応が良さそうですが、それぞれの対応について解説していきます。 1,picture タグを使う場合 picture タグで対応する場合、下記のように記述することで対応することができます。 <picture> <!-- WebP用画像 --> <source srcset="xxx.webp" type="image/we
400なのか900なのかは表示したいアイコンによって指定が異なりますので注意が必要です。 Twitterアイコンですと、Brands(つまりfont-weight: 400;)のみの提供。 RSSアイコンの場合は、Solid(つまりfont-weight: 900;)と、RegularとLightの3種類があります。 スタイルについては、赤枠部分で確認してください。(提供スタイルが1種類しか無い場合は右側の選択肢は表示されず) 原因その5:バックスラッシュを付けていない 3回目の登場ですが、再びCSSです。 .icon::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; /*←ココ!!!!!!!*/ } contentにUnicodeを記載して呼び出したいアイコンを指定するのです
グループワークやリモートワークを行う環境で、データを1箇所にまとめて格納できるオンラインストレージサービス「Dropbox」。2011年に日本語対応してからというもの、愛用されている方も多いのではないでしょうか。 かくいう弊社もDropboxをバリバリ使って日々業務を行っております。もはや足を向けて寝られない存在です。 そんなDropboxですが、近年のアップデートにより、データを保存・共有するだけでなく、デザインフィードバックツールとしてもかなり優れていることに気づきました。 実際に使ってみると、弊社でよく使っているデザインフィードバックツール「InVison」と比べても遜色なく、良い感じです。 ということで、今回はDropboxのフィードバッグツールとして良かったポイントをまとめてみましたのでご覧ください。 それではどうぞ!! とりあえずDropboxファイルにコメントしてみよう まず
サイト高速化にあたり Google の PageSpeed Insights と睨めっこをしている際、「キー リクエストのプリロード」という項目が出現しました。 キー リクエストのプリロード <link rel="preload"> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。 ↓こんな感じのです この改善がサイト高速化に効く使える技術であることがわかったのですが、なかなか理解しにくかったので、今回は <link rel="preload"> についてわかりやすく説明していきます。 これまでスルーしてしまっていた方は、これを機会に覚え、使いこなせるようにしてみましょう。 preload=プリロードと読むそうです。 その名の通り、プリ=先行、ロード=読み込み、で先行読み込みをブラウザに指示する機能になります。 link 要素なの
こちらを受けて、本エントリーを認めている次第です。 これまでも「更新日」「最終更新日」を構造化データ対応をしていたのですが、ISO 8601 形式にはしておらず、また JSON-LD での対応もしていなかったので、これを機会にしっかり対応してしまおうというのが趣旨でございます。 WordPressブログ用の構造化データ(コピペ版) 「兎にも角にも、自分のブログも構造化データ対応させたい」という方は以下のソースコードを footer.php (</body>タグの直前に貼り付ければOK)にコピペしてしまいましょう。 あ、もちろん一部、著者名など書き換えが必要ですので、そこだけは変更お願いします。 //記事ページのみに構造化データを出力 <?php if ( is_single()) : ?> //サムネイルを取得 <?php $thumbnail_id = get_post_thumbnai
Web制作で役立つAdobe XDの「神プラグイン10選!!」導入方法からおすすめポイントまで徹底解説!! シェア つぶやく ブックマーク LINE Pocket 颯爽とAdobe界に登場し、我々制作者のフローをより便利にしてくれるステキな「Adobe XD」。 XDは日々アップデートが行われ、便利な機能追加が進んでいます。しかし、まだまだ「この機能があったらいいな!」が絶妙に無かったりで、本格的に稼働させようと思うと、歯がゆい思いをするデザイナーさんも多いのではないでしょうか。 XDでもプラグインが可能に! そんなXDですが、2018年10月のアップデート(バージョン 13.0)より、プラグインの使用・開発が可能になりました! XDのプラグインはPhotoshopなどと同様にHTML・JavaScriptなどの技術で開発できるため、フロントエンドの知識があれば(比較的)手軽に作成可能です
CSS Grid とは 最近、Web ではグリッドレイアウトを取り入れたデザインが増えてきました。しかしグリッドレイアウトをWeb上で実現するためには float や padding、margin など様々なプロパティを駆使して地道に実装するか、 JavaScript の力を借りるしかありませんでした。 IE9 の正式サポートが終了した今では flexbox を使う方法もありますが、基本的に flexbox は縦方向か横方向のどちらか一方向にコンテンツを並べることは得意ですが、それ以上のことはできません。しかし CSS Grid の登場により、縦方向や横方向の区別がない複雑なレイアウトも比較的簡単にWeb上実現することができるようになりました。 例えば以下のような Pinterest で採用されているレンガ調のレイアウトは flexbox では実現することが難しいですが、CSS Grid
Googleしごと検索は募集要項を公開するだけでは掲載されません。ページ内に記載された構造化データをクローラーに読み込んでもらうことで、はじめて掲載することができます。 弊社のようにホームページ制作を行っており、社内にエンジニアさんがいる場合は、さほどハードルの高い実装ではないのですが、そうでない人にとってはタグが小難しく見えそうです。 なので知識の無い人でも簡単に構造化データを作成し、貼り付けるだけ対応することがツールを作ってみましたので、良かったらご利用ください。 JOB POSTING GENERATOR https://wk-partners.co.jp/homepage/tool/job-posting/ ただ、現状ベータ版となってまして、ロゴなど一部の表示項目には対応できていません。なので、「細かいことはよくわからないけど、取り急ぎ対応しておきたい!」という方におすすめします。
Googleしごと検索(Google for Jobs)が日本でもサービスを開始してから、一ヶ月ほど経ちましたね。早期に対応したウェブマスターたちが、そろそろ「対応してどうだったか」と成果を気にしだす頃ではないでしょうか。 そこで今回はGoogleアナリティクスで、Googleしごと検索からの流入数などを確認する方法をご紹介したいと思います。 ちなみに対応方法などが知りたい、という方はこちらからどうぞ。 流入数を確認する最も簡単な方法 手っ取り早く流入数だけを確認するのであれば、今からご紹介する方法が簡単です。 「参照元 / メディア」を確認する まずアナリティクスにログインしましょう。 左サイドバーに表示されているメニューから「集客」>「すべてのトラフィック」>「参照元 / メディア」と進みましょう。 これでまず、外部サイトからの流入一覧が確認できます。 しかしこれだけでは全ての外部サイ
(なぜひらがな?) 急なリリースでしたので、まだ対応の準備ができていない企業も多いのではないでしょうか。 弊社で早速対応させてみたところ、無事 Google for Jobs への掲載が確認できましたので、対応手順や注意点などを共有します。 いち早く、そしてとりあえず対応させたい!という方に向けた内容になっています。 Google for Jobs とは? そもそも Google for Jobs とはなんぞや、という方のために簡単にご説明します。 表示位置 検索結果に表示されます。仕様についてはまだ情報が足りませんが「○○ 求人」や「派遣」といった、何かしら求人に関連したキーワードで検索した際に以下のように表示されます。 Googleのサービスですので、今のところYahooやBingで検索した際は表示されていません。 ※Yahooの場合は別で「Yahooしごと検索」(またひらがな)という
AdobeXDやIllustratorがWebデザインツールとして、どんどんと使いやすくなっていますが、まだまだPhotoshopでデザインする人が多いと思います。 かくいう私もメインのデザインツールはPhotoshop。そこで今回はPhotoshopの作業をより快適に行うために私が使っているおすすめのプラグインやスクリプトをご紹介いたします!! Photoshopを使い始めた新米デザイナーさんは是非ご参考ください。 スクリプトとプラグインの違い 紹介の前にプラグインとスクリプトの違いについて整理しておきましょう。 スクリプトはPhotoshopの複雑な作業を自動化してくれる Photoshopを使ってデザインをしていると同じ作業の繰り返しを行うことが多々あります。そんな時にPhotoshopの「アクション」機能を使えば、作業を自動化して行うことができます。便利ですね。 ただ、アクションで
診断テストを作りたけれど費用があまりかけられない…そのような状況に遭遇したことはございませんか?またSEOのための飛び道具としてうまく活用したいというニーズもあるのではないでしょうか。(分かる方には分かるはず) WordPressのプラグインである「診断ジェネレータ作成プラグイン」を使うことで、無料で簡単にプラグインを作ることができましたので、今回はそのプラグインで「できること」と「設定方法」をご紹介します。 「診断ジェネレータ作成プラグイン」の基本仕様 できることをご紹介する前に、まずは基本の結果表示のアルゴリズムをご理解いただくほうが早いと思いますので、ご説明します。 管理画面で回答の選択肢に対し、それぞれ点数を設定することができます。最終的に、その合計点数に応じた診断結果をユーザーに対して表示するという仕組みです。 デモ デモページはこちらから 「診断ジェネレータ作成プラグイン」でで
次のページ
このページを最初にブックマークしてみませんか?
『wk-partners.co.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く