はてなブックマーク

クライアントのビジネスに真の価値を提供し続けることを私たちの使命としています。常にクライアントの成功を第一に考え、共に成長していくパートナーであり続けます。 18年の実績に基づく、 確かな信頼。 私たちはインターネットの黎明期から18年間にわたり、数多くのプロジェクトに携わってきました。初期のインターネット環境から現代のデジタル時代に至るまで、急速に進化する技術とトレンドに適応してきた経験が、私たちの強みです。 この歴史を通じて蓄積されたノウハウは、クライアントのニーズに対する深い理解と、効果的な解決策の提供を可能にします。また、過去の成功事例を活かし、新たなチャレンジに対しても迅速かつ的確に対応できる柔軟性があります。 私たちは、Webサイトのデザインから開発、マーケティング戦略の立案まで、あらゆるフェーズで高品質なサービスを提供します。長年にわたる経験は、技術的な知識や、トラブル対応、

サイトのメインビジュアルで動画がを再生するのは最近のトレンドとなっています。 今回はさらにアレンジして自動再生動画を使ったスライダーの作成に挑戦してみました。その際の知見をご紹介いたします。 <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とは？ 代表的な１０の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サイトピックアップしてみました。また最後に今年の傾向のまとめをご紹介しています。（順不同） ※2025年度版も公開しました！ https://wk-partners.co.jp/homepage/blog/hpseisaku/webdesign/recruit2025/ 疾走感とエネルギッシュの融合（日清食品） 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 やプログラムのある程度の知識は必要になってきます。 React の歴史と背景 1. React の誕生 React は、2011年にFacebookのソフトウェアエンジニアであるジョーダン

ブログなどウェブで写真を利用する際、iPhone のようなスマートフォンでしたら写真加工アプリなどでオシャレに加工できますが、パソコンで加工して文字も入れて、でもそれだけのために Photoshop を購入するとなると、ためらってしまいます。 そこで、簡単に写真を加工できるソフトが今回ご紹介する「PhotoScape X」です！！！ とご紹介しようかと思ったのですが、実はこのソフトウェアを利用したきっかけは画像分割でした。 どうしてもウェブ関係の仕事をしていると縦長のスクリーンショットを扱う機会が多かったりするのですが、それがパワーポイントに載りきらなかったりするんですよね。 その度に Photoshop を起動して、縦のピクセル数を計算して、３分割にしたり４分割にしたり、という作業を行っていたのですが、これが毎月レポートの度となると少々しんどくて。 そこで一発で２分割でも３分割でも４分割

ブラウザ対応状況に伴い、css3の「mix-blend-mode」を使い、テキストや画像にブレンドモードを適用しているサイトを多く見るようになってきました。 今回はその「mix-blend-mode」について使い方や実際の効果などをご紹介します。 ブレンドモードとは？ 普段からPhotoshopなどのグラフィックツールを活用している方にとってはお馴染みのブレンドモードですが、知らない方のためにブレンドモードについて説明します。 ブレンドモードは描画モードとも言い、PhotoshopやIllustratorなどのAdobe系のソフトで、昔からある機能の1つです。 ブレンドモードでは要素と要素を重ねた時の表現を指定することができます。重なる部分のコントラストを強めたり、弱めたり、暗くしたり、明るくしたり色を反転させたりと様々な効果をブレンドできます。 ブレンドモード：「乗算」 例を出してみまし

対応方法について 基本的には WebP 画像を作成後、 img タグに直接 .webp のファイル名で記述すれば対応できるのですが、 <img src="xxx.webp"> WebP に対応していないブラウザもあるため（特に Safari）、従来画像と共存させる必要があります。 共存させることを前提とした場合、今の時点での対応方法については大きく２種類が考えられます。 １，picture タグを使う ２，htaccess で制御する 結論から言うと、htaccess での対応が良さそうですが、それぞれの対応について解説していきます。 １，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の３種類があります。 スタイルについては、赤枠部分で確認してください。（提供スタイルが１種類しか無い場合は右側の選択肢は表示されず） 原因その５：バックスラッシュを付けていない ３回目の登場ですが、再びCSSです。 .icon::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; /*←ココ！！！！！！！*/ } contentにUnicodeを記載して呼び出したいアイコンを指定するのです

グループワークやリモートワークを行う環境で、データを１箇所にまとめて格納できるオンラインストレージサービス「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

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の「アクション」機能を使えば、作業を自動化して行うことができます。便利ですね。 ただ、アクションで

YesNo形式の診断テスト・占い・クイズが簡単作成できる無料ツール「診断コンテンツジェネレータ」WordPressプラグイン シェア つぶやく ブックマーク LINE Pocket 診断テストを作りたけれど費用があまりかけられない…そのような状況に遭遇したことはございませんか？またSEOのための飛び道具としてうまく活用したいというニーズもあるのではないでしょうか。（分かる方には分かるはず） これまで利用していたWordPressのプラグインである「診断ジェネレータ作成プラグイン」が開発終了したようでしたので、自社で作成してみました。 取り急ぎ開発したのですが、名称を「診断コンテンツジェネレータ」としました。 「診断コンテンツジェネレータ」の基本仕様 できることをご紹介する前に、まずは基本の結果表示のアルゴリズムをご理解いただくほうが早いと思いますので、ご説明します。 管理画面で回答の選択肢