ブログ

BLOG

Trelloの終わったタスクを自動アーカイブする方法

2022.8.02

お役立ち

タスク管理を簡単にしてくれる、みんな大好きTrello。そんなTrelloですが、ちょっと面倒だなと思うのが「終わったタスクのアーカイブ」です。私は個人のタスク管理にも使っていますが、気がついたら終わったタスクが溜まっていて、まとめてアーカイブしていました。本当はタスクが完了した時点でアーカイブしていけばいいのでしょうが、地味に面倒くさいんですよね… そんな面倒くさがりな私が導き出した答えが「月1自動アーカイブ」です。設定はややこしいですが、一度設定すれば、指定したリストに終わったタスクをポポイっと投げておくだけで、Trelloがキレイにしてくれます。控えめにいって、めちゃくちゃ楽です。なので、今回は「月1自動アーカイブ」の設定方法を紹介したいと思います！記事通りに進めれば誰でも設定できますので、ぜひ試してみてくださいね。これからすること【デモあり】個人タスクの管理もTrelloがおすすめで作った「自分タスク管理用ボード」の「終わったお仕事リスト」にあるカードを、毎月1日に自動アーカイブするようにします。手順1. Trelloの情報を取得する自動アーカイブに必要な「APIキー」「トークン」「リストID」を取得します。 APIキー取得 ①Trelloにログインした状態で下記URLにアクセス Trello – 開発者向けAPIキー ②「規約に同意する」にチェックを入れAPIキーを取得する ③表示されたAPIキーを控えておくトークン取得 ①下記URLをブラウザで開く（<apiキー>は置き換える） https://trello.com/1/authorize?key=<apiキー>&name=&expiration=never&response_type=token&scope=read,write ②ページ下にある許可をクリックしトークンを表示する ③表示されたトークンを控えるリストID取得 ①下記のURLを開き、表示されたページから自動アーカイブする「ボードID」を取得する（<apiキー><トークン>は置き換える） https://trello.com/1/members/me/boards?key=<apiキー>&token=<トークン> 表示されたページにはTrelloの全コードが表示されるので、「Ctrl + F」で対象のボード名を検索します。今回は「自分タスク管理用ボード」を検索しました。ボード名のすぐ前にIDが出ているので控えておきます。 ②下記のURLを開き、表示されたページから自動アーカイブする「リストID」を取得する（<ボードID><apiキー><トークン>は置き換える） https://trello.com/1/boards/<ボードID>/lists?key=<apiキー>&token=<トークン>&fields=name これでボード内にあるリストのIDが表示されます。今回は「終わったお仕事」のリストIDを控えておきます。手順2. GASでプロジェクトを作る GASは（Google Apps Script）の略語で、Googleが提供するアプリケーション開発プラットフォームです。このGASを使って、自動アーカイブするためのプロジェクトを作成します。 GASを開く ①Googleのメニューから「ドライブ」を選択 ②Googleドライブの「新規」をクリック ③「その他」＞「Google Apps Script」をクリックプロジェクトを作る ①エディタを開き、下記の関数をコピペ（デフォルトで入っている「function myFunction ( ) { }」は消す） function archiveCardsInList() { const PROPERTIES = PropertiesService.getScriptProperties().getProperties(); const DATAS = getCardDatasInList( PROPERTIES.API_KEY, PROPERTIES.TOKEN, PROPERTIES.LIST_ID ); archiveCardsByDatas( DATAS, PROPERTIES.API_KEY, PROPERTIES.TOKEN ); } function getCardDatasInList( apiKey, token, listId ) { const URL = 'https://api.trello.com/1/lists/' + listId + '/cards' + '?key=' + apiKey + '&token=' + token + '&fields=id,name,dateLastActivity,shortUrl,desc' ; const RESPONSE = UrlFetchApp.fetch( URL ); const DATAS = JSON.parse( RESPONSE.getContentText( 'UTF-8' ) ); return DATAS; } function archiveCardsByDatas( datas, apiKey, token ) { datas.forEach( function( data ) { const ID = data["id"]; const URL = 'https://api.trello.com/1/cards/' + ID; const PAYLOAD = { 'key': apiKey, 'token': token, 'closed': 'true', }; const OPTIONS = { 'method': 'put', 'payload': PAYLOAD, }; UrlFetchApp.fetch( URL, OPTIONS ); } ); } ②「プロジェクト名」「ファイル名」を変更 ③「プロジェクトの設定」をクリック＞タイムゾーンを設定＞「スクリプトプロパティを追加」をクリック ④スクリプトプロパティにプロパティと値を設定する API_KEY : 手順1で取得したTrelloのAPIキー TOKEN : 手順1で取得したTrelloのトークン LIST_ID : 手順1で取得したTrelloのリストID ⑤「トリガー」をクリック＞「トリガーを追加」をクリック ⑥トリガーを設定＞「保存」をクリック毎月1日、0~1時の間に自動アーカイブする設定にしていますが、お好みで調整してください。 ⑦プロジェクトを実行するアカウントを選択 ⑧エラーを解消（でない場合もある）「advance」をクリック「（プロジェクト名）に移動」をクリック ⑨Trelloとプロジェクトを紐づける「Allow」をクリックトリガーができていたら完了です。実行してみる ①「エディタ」を開く＞「実行」をクリック ②アーカイブされたことを確認するお疲れさまでしたこれで「月1自動アーカイブ」の設定は完了です。慣れれば10分くらいで終わるので、必要に応じて設定してみてください。今回紹介した以外にも、Trelloではさまざまな操作を自動化できます。また、Google拡張機能と連携させることで、ガントチャートが作れたりと、あなた好みにカスタマイズすることもできます。機能を拡張することで、まだまだ便利になる可能性があります。ぜひ、カスタマイズを楽しんでくださいね。

【デモあり】個人タスクの管理もTrelloがおすすめ

2022.8.01

お役立ち

弊社でも利用しているタスク管理ツール「Trello」。チームで情報を共有しながらタスク管理できるのが強みですが、個人のタスク管理にも使えます。超便利！「Trello」で始めるタスク管理で紹介している機能だけで、すぐ始められます。私はタスクのほかに、さまざまな情報を管理するためにも使っていますが、タスク管理や情報の確認にかかる時間がかなり短縮されています。 Trelloさえ見れば必要な情報がすべて分かるので、1日中開きっぱなしの状態です。今回は、私がTrelloをどんな風に使ってタスク管理をしているか紹介したいと思います。設定方法も説明するので、ぜひ参考にしてください。この記事が、あなたのタスク管理の助けになれば嬉しいです。個人タスクの管理を始めよう上の画像は、実際に私がしているタスク管理の方法です。メインの業務がライティングなので、それを中心に必要なタスクなどを組んでいます。リストは「メモ」「ツール」「テンプレート」「お仕事」「終わったお仕事」で分けました。実際にはもうちょっと細かく組んでいますが、管理方法はまったく同じになります。ここから、リストをどう分けているかと、カードの設定や使い方を説明したいと思います。メモ定期的に確認したい、もしくは必要になる情報を入れています。画面では3つですが、実際はキレイな画像を作るコツ（知識）、アクセス解析ツールの設定方法（技術）など、いろいろな情報を管理しています。カードが増えやすい場所なので、カバーつきカードで区切りをつけています。これをするだけでも情報をかなり探しやすくなるので、必要に応じて使ってみてください。ラベルのつけ方 ①カードを開いて右メニューのカバーをクリック ②カバーの色とサイズを選択するサイズを選択するとき、右のサイズにするとカード全体に色がつくので見やすくなります。カードの中身こんな感じでライティングに必要な知識をまとめています。基本的には、参考になるサイトのURLと、どんなサイトなのか分かる見出しを作っています。横線は、-（半角）を3回連続で入力すると引くことができます。ツールライティングに必要なテキストチェックツールなど、業務に必要なツールを管理しています。ほかにも、ブログを書くときに使う画像圧縮ツールや、各種ファイルをPDFに変換するツールなど、定期的に使うものはすべてここで管理します。カードの中身リストの中身はこんな感じです。・ログイン画面ツールのログイン画面へのリンク・ログイン情報ログインするためのID、PASSなど・使い方参考使い方を紹介しているブログのリンクなどツールを使うために必要な情報を、すべて同じカードに入れています。テンプレート私の場合はライティング業務がメインになるので、案件が増えるたびに似たようなタスクが発生します。毎回カードを作るのが大変なので、テンプレート化しました。新規で作ると地味に時間がかかるので、トータルで考えるとかなりの時間を節約できていると思います。カードコピーであっという間に量産できるので、テンプレート化はお勧めです。カードの中身カードの中身はこんな感じで、テキスト作成に必要な情報が把握できるようにしてあります。作成リストのチェックボックスをクリックすると終了タスクとなり、進捗状況が更新されます。タスクが同じ業務が多いなら、リストを作っておくことをお勧めします。・会社名お客様の会社名・業種お客様の業種・既存サイト既存サイトがあれば入力・テキスト資料保管場所ヒアリングシートなどの保管場所・テキスト保管場所作成したテキストの保管場所・テキストへの要望お客様や社内のテキスト作成依頼者からの要望・テキスト参考資料同業他社サイトなど、テキスト参考先のURL ・作成リストサイトのタイプ別に必須ページをリスト化案件によって作成ページを適時追加カードのコピー ①カードにマウスオーバーしたら表示される鉛筆マークをクリック ②タイトル（カード名）を変える ③チェックリストをコピーする場合はチェックを入れる ④カードのコピー先を選択お仕事すべての業務タスクを入れてます。期限が定められていないタスクには自分期限を設定して、業務が溜まらないようにしています。期限つきカードを自動で並び替える設定をしておけば、タスクの取りこぼしもなくなります。チェックリストで進捗を管理し、すべてのタスクを完了したら期限のチェックボックスをクリックします。すべてのチェックボックスをチェックしたら「終了したお仕事」リストに移動します。自動並び替えの方法 ①リスト右上の・・・をクリック ②毎日リストを次で並び替えをクリック ③カレンダー、アクションを設定し「新しいルールを追加」をクリック ※無料プランだとルール実行回数に制限があるため、1日に1回くらいのスケジュールにしておくことをお勧めします。終わったお仕事完了したタスクを入れていきます。すぐにカードが溜まるため、定期的にアーカイブしましょう。私は月に1度、このリスト内のカードを自動でアーカイブしています。 Trelloの終わったタスクを自動アーカイブする方法で紹介してるので、よければご覧ください。 Trelloを上手に利用してください今回紹介したのは、私なりのTrelloの使い方ですが、業種や業務内容によって使い方は変わってくると思いますが、使い方によってはどんな業務にも対応できるポテンシャルを持ったツールです。拡張機能も数多く用意されているので、ぜひあなたにあったTrelloの使い方を見つけてください。

制作会社とのやり取りで「？」ってなりやすい用語まとめ

2022.8.01

ホームページ制作

ホームページ制作会社とのやり取りで、用語の意味が分からず困ったことはないでしょうか？「上位表示させたいキーワードを教えてください」「ドメインはどうしますか」「レスポンシブ対応はご希望ですか」 WEB業界は、普段関わらない方には分かりずらい「専門用語」が溢れています。どの制作会社も、お客様とのやり取りであまり専門用語を使わないよう気をつけていると思います。しかし、普段から使っているため、どうしても会話の中に現れてしまうことも… そこで今回は、数ある専門用語から使われやすいものをピックアップし、分かりやすく簡潔に説明します。制作会社とのやり取りで分からない用語があれば、ぜひチェックしてみてください。よく使われる「専門用語」一覧アカウントインターネット上のサービスにログインするための情報です。キャッシュアクセスしたホームページの画像やテキストなどを一時的に保管しておく機能です。ホームページの情報を修正した際、その内容が反映されいない場合は、保管されているキャッシュの情報が表示されている可能性が高いです。修正してもらったのに内容が変わらない！というときは、キャッシュを消すことで解決することが多いです。関連記事 : 【ブラウザ別】さくっとキャッシュをクリアする方法検索エンジン GoogleやEdgeなど、インターネット上の公開されている情報を検索、表示させるためのプログラムです。検索キーワード検索エンジン上で検索に使われるキーワードです。ホームページ制作の場面では、ユーザーがどんなキーワードを使ったときに見られやすくされたいかといった質問で使われます。弊社であれば「富山　ホームページ　制作会社」といった検索キーワードを指定することになります。検索順位ユーザーが検索エンジンで特定のキーワードで検索したとき、自社のホームページが表示される順位で、上位であるほどアクセスされる可能性が高くなります。コーディングデザインカンプをもとに、ホームページをブラウザ上で見える状態にする作業で、構築ということもあります。コンバージョン（CV）購入や申し込み、問い合わせなど目的としている成果を指します。ECサイトであれば商品購入、リクルートサイトであればエントリーがコンバージョンとなります。サーバーホームページのコンテンツ（画像やテキストデータなど）を格納しておく場所です。ユーザーがホームページにアクセスすると、ここからデータが送られブラウザに表示されます。参考サイトデザインやテキストなどの参考にするサイトです。制作会社からお客様に提示して気に入ったものを参考にする場合もあれば、お客様から提示されたものを参考に制作する場合もあり、デザインの参考にされることが多いです。シークレットモード Google Chromeのブラウザモードの一種で、閲覧履歴やcookie（ログインが必要なホームページのログイン情報を一定期間保持するもの）などの情報がブラウザに保存されない機能です。シークレットモードは、Chrome以外のブラウザでも実装されています。ブラウザごとに呼び方は異なりますが、機能はほぼ同じです。 Internet Explore（IE）やEdgeでは「InPrivateブラウズ」、Firefoxでは「プライベートブラウジング」、Safariでは「プライベートブラウズモード」と呼ばれています。シークレットモードはキャッシュが無効化されるため、ホームページを更新した際の確認などにも便利です。ディレクトリカテゴリーやページを階層分けしたものです。ページタイトルや内容をまとめて一覧にしたものを「ディレクトリマップ」と呼びます。ディレクトリマップは、どんなページが必要なのかやホームページの規模感、制作に必要な情報を正確に把握するための重要な資料になります。デザインカンプコーディングを始める前に作るデザインの完成イメージで、制作物の完成イメージを共有するためのものです。ドメイン URLやメールアドレスなどに含まれる「〇〇.jp」などの文字列がドメインです。バナーほかのホームページやページにリンクする画像です。キャンペーン用サイトなどを作った際、コーポレートサイトから誘導するときなどにも設置されます。ファーストビューホームページにアクセスした際に最初に表示される領域で、スクロールせずに表示される範囲です。ホームページの第一印象を決める重要な部分です。ペルソナ商品やサービスのターゲットとなるユーザー像です。化粧品であれば、「28歳女性。仕事で外出することが多いため、日焼けによる肌あれば気になる」など、マーケティングに落とし込むための詳細な人物像がペルソナになります。ブラウザ Google chrome や Edge、Safariなど、ホームページを閲覧するためのソフトウェアのことです。それぞれのブラウザごとに特徴が異なり、ブラウザによってホームページの見え方が異なってくることもあります。モバイルファーストユーザーの利用状況などをもとにスマートフォン向けに最適化され、スマートフォンでもストレスなく利用できるデザインにすることです。レスポンシブデザイン画面のサイズに合わせて画像やテキストを拡大、縮小する手法です。未対応の場合、スマートフォンだとテキストが極端に小さくなったり、画像が画面外にはみ出たりなどの不具合が起きる場合があります。検索ニーズの主流がスマートフォンになってきているため、レスポンシブ対応は非常に重要です。 CMS （シーエムエス）「Contents Management System」の略語で、ブログスタイルのホームページパッケージのことです。専門知識がなくてもブログや掲載している情報を更新できるため、多くの企業で採用されています。 GoogleAnalytics （アナリティクス） Google社が提供しているアクセス解析ツールで、高機能にも関わらず誰でも無料で利用できます。 SEO （エスイーオー）「Search Engine Optimization」の略語で、Googleなど検索エンジンで上位表示させるための施策です。上位表示されるかどうかで検索での流入数が大きく変わるため、ホームページ運営には欠かせないファクターです。日本語にすると「検索エンジン最適化」になります。 SSL （エスエスエル）「Secure Sockets Layer」の略語です。インターネットを介して情報のやり取りをする際、暗号化をすることで改ざんや盗み見を防ぐ技術で、この技術を取り入れることをSSL化といいます。近年では、SSL化されてないホームページをGoogleが表示しないこともあり、ホームページの運営には必須といえる技術です。 UI （ユーアイ）「ユーザーインターフェース」の略語で、ユーザーとサービスの「接点」を意味する言葉です。ホームページの場合はフォントやデザイン、操作性などの「見た目・使いやすさ」を指します。 UX （ユーエックス）「ユーザーエクスペリエンス」の略語で、ユーザーがサービスを通して得る体験のことです。ホームページの場合はそのホームページを訪れたユーザーがどのような体験を得たのか、文字の読みやすさ、情報の充実度、快適な操作性、問い合わせの満足度など感じたこと全てを指します。知っておくとやり取りがスムーズにホームページ制作に関する専門用語は非常に多く、今回紹介したもの以外にもたくさんあります。すべてはとても覚えられないと思いますが、制作会社としっかりと話し合うためには、ある程度の知識をつけることが大切です。基礎知識があれば提案に対して突っ込んだ質問ができ、納得しながら進められるため完成度も高くなります。ホームページ制作を始めるときは、簡単でいいので基礎知識だけでもつけることをお勧めします。

夏季休業のご案内

2022.7.29

お知らせ

暑い日が続いており、外に出るのが嫌になる日が続きますね。水分をしっかり摂り、熱中症に気を付けたいところです。県外には行きずらい情勢ですが、どこか涼しい山などでのんびり過ごしたいものです。さて、表題のとおり夏季休業ついてお知らせいたします。休業日：2022年8月11日（木） ~ 2022年8月15日（月） 2022年8月16日（木）から営業を再開します。ご不便をお掛けしますが、何卒ご理解のほどよろしくお願い申し上げます。

【2022年版】おすすめカラーパレットツール10選

2022.7.28

ホームページ制作

ホームページにとってカラーはとても重要な要素の1つです。印象がガラッと変わる「カラー」の選び方で、ホームページのカラーが与える印象と選び方を説明しましたが、いざ選ぶとなると、なかなか難しいと思います。そこで今回は配色を提案してくれたりコレクションしたりしているツールを紹介します。ノンデザイナーの方でも素敵な配色を見つけられるツールばかりなので、ぜひホームページのカラー選びの参考にしてください。 Adobe Color CC Adobe Color CC Adobe製のツールで、トレンドカラーやキーワードからカラーパレットを探すことができます。カラーハーモニー（色同士の関係性）から配色を生成することもできます。カラーハーモニーは以下から切り替えられます。・類似色・モノクロマティック・トライアド・補色・コンパウンド・シェード・カスタム画像からカラーパレットやグラデーションを生成できるなど機能も充実おり、ログインするとカラーパレットを保存することもできます。 Color Supply Color Supply 2~4色の組み合わせから、さまざまなパターンの配色を探すことができます。類似色やトライアドなどからも配色を見つけられる使いやすいツールです。 Hue 360 Hue 360 色相、彩度、明度を選択しながら配色を作成できます。Brightnessのボックスをクリックするとカラーホイールの基準の明るさが変わります。メインの色を選択すると配色バランスのいい色だけ残るので、自分で色の組み合わせを探すのに向いています。 Nippon Colors Nippon Colors 日本の伝統色が250種類用意されており、和テイストのホームページを作るときに重宝します。全然知らない色も多く、見ているだけでも楽しめます。 Color Kitty Color Kitty イメージ画像をアップロードするとカラーパレットが生成され、お勧めの配色を提案してくれます。ブランドやサービスのイメージが決まっているときに役立ちます。ナンバーが付いているピンを動かすと、さまざまなパターンを見ることができます。 ColorDrop ColorDrop 4色の配色が集められています。画面上部のプルダウンで人気順に見ることもできます。 Farbvelo Farbvelo 画面右下のリロードボタンをクリックするだけで美しい配色を提案してくれます。色数やカラーモードなど詳細設定もでき、クリックでカラーコードもコピーできます。 Color Leap Color Leap 世界中の有名絵画や美術品、ノスタルジックなポスターに使われている色が集められています。ほかのツールとは毛色の違う面白みがあります。作品などを時代を追って見ることができ、見ているだけでも楽しめます。 uiGradients uiGradients 美しいグラデーションがランダムで表示され、左右の矢印をクリックすると切り替わります。左上の「Show all gradients」のボタンをクリックするとグラデーションを一覧で見れ、ベースの色を選択できます。クリックするだけでCSSや画像をダウンロードできます。 HELLO COLOR HELLO COLOR 画像をクリックすると2色が更新されます。複雑なパターンを探すことはできませんが、何となく眺めているとアイデアが浮かんでくるかもしれません。素敵な配色を見つけてください今回紹介したのは、数あるツールのほんの一部です。「カラーパレットツール」などで検索すれば、他にもたくさんのツールが見つかります。ツールをまとめたブログもたくさん出てくるので、チェックするのもいいと思います。いろいろなツールを使って、ぜひ素敵な配色を見つけてくださいね。

ホームページの種類とそれぞれの役割とは

2022.7.25

ホームページ制作

ひと言で「ホームページ」といっても、さまざまな種類があり、それぞれ異なる役目を持っています。コーポレートサイトやショップサイトはよく耳にしますが、ランディングページやサービスサイトはあまり馴染みがないのではないでしょうか。ホームページは、目的によって作る種類が変わってきます。自社の課題を解決し、目標を達成するためには、それぞれの役割を把握して、適切な種類を選ぶことが大切になります。ホームページの種類ホームページの種類は大きく下の7つに分かれます。・コーポレートサイト・ショップサイト・サービスサイト・ランディングページ・ブランディングサイト・リクルートサイト・オウンドメディアそれぞれ役割だけでなく、必要なコンテンツなども異なります。ここから、ホームページの種類とそれぞれの役割を解説します。種類を選ぶ際の参考になれば嬉しいです。コーポレートサイト自社の公式情報を公開するためのサイトで、企業が開設するウェブサイトとしては最も一般的なものです。インターネット上の名刺とも呼ばれ、会社案内が主な役割となり、サービス・商品紹介や会社概要、事業案内、経営理念などを主なコンテンツになります。自社を知ってもらうことで取引先や顧客からの信頼獲得が目標になります。弊社のホームページは典型的なコーポレートサイトです。サービスや実績、会社概要など「どんな会社なのか知ってもらう」ためのコンテンツがまとめられています。ここからサービスを抜き出し、詳しく紹介したものが「サービスサイト」、採用情報に特化したものが「リクルートサイト」になります。ショップサイトインターネット上で商品やサービスを直接販売するためのサイトです。リアル店舗と違い「いつでも・どこでも」販売できるため、多くの企業がショップサイトを導入しています。 Amazonや楽天のようなモールに出店する企業も多いですが、近年は自社でショップサイトを持ち、販売とブランディングを同時におこなう企業が増えています。出典 : 株式会社ユニクロ日本人なら（多分）誰でも知っているユニクロも自社ショップサイトで販売&ブラディングしています。コーポレートカラーの赤×白ですっきりとしたデザインで、商品がとても見やすいサイトになっています。ユニクロヘビーユーザーの私はしょっちゅう見ていますが、ほぼすべての商品ページにモデルが着用した画像があるので、どんな服なのかとてもイメージしやすいです。私は、サイトで服を見る＞店舗で実際見て気に入ったら買う＞色違いや洗い替えをサイトで買う。という形で利用しています。ブランディング、売上向上、顧客満足向上、販路拡大など、さまざまなメリットが得られます。サービスサイト自社が扱うサービスの紹介、認知拡大を目的としたサイトです。サービスの特長・メリットを紹介するほか、利用方法やカスタマーレビューなど、申し込みや問合せにつなげるための情報を掲載します。出典 : kintone これは、サイボウズ株式会社が提供している業務アプリ構築サービス「kintone」を紹介するサービスサイトです。業務効率を高めるためのシステムを、専門知識がなくても直感的に作成でき、日清食品グループや日産自動車など大手企業でも導入されています。部署や業務ごとの利用例が数多く紹介され、機能や料金も詳しく掲載、トライアルの申し込みや問い合わせも可能で、キントーンに関する情報が網羅されています。キントーンに限らず、サービスサイトはサービスの機能・メリットを伝えることに特化しているため、一般的にコーポレートサイトに比べて申し込みや問合せがされやすくなります。ランディングページ特定のサービス・商品に特化したサイトで、「プロモーションサイト」とも呼ばれ、キャンペーン告知などにも使われます。特設サイトのような位置づけで、コーポレートサイトに掲載されるバナーやリスティング広告での集客がメインとなります。アクセスしたユーザーをそのまま問合せや購入・申し込みに誘導するため、ストーリーを重視した1ページ構成で作られます。出典 : ドルチェ&ガッバーナ × 呪術廻戦ドルチェ&ガッバーナと呪術廻線がコラボしたスペシャルコレクションを紹介するランディングページです。日本発のサブカルチャーとイタリア発のラグジュアリーブランドの世界観が見事に融合しています。このブログを書いている時点では終了していましたが、Twitterを絡めたオリジナル壁紙がもらえるキャンペーン情報も掲載されていました。商品紹介、キャンペーン情報など、1ページにすべて収められるため、キャンペーン参加や商品購入への欲求を一気に高められることが特徴です。余談ですが、連載が始まったころは異世界・剣×魔法・ファンタジーというワードに感じるものがあり、ジャンプはブラッククローバー派でしたが、最近アプリで読み始めました。面白いですね、呪術廻線。ブランディングサイトサービスや商品のブランディングに特化したサイトです。直接的な販売ではなく、他社との差別化、ブランドイメージの浸透、ロイヤルカスタマー創出などを目的に作られます。出典 : 男前豆腐店トップ画像から強烈なインパクトを与えてきますね。豆腐とまったく結びつきませんが、心になにかを撃ち込まれました。一瞬で「豆腐といったら男前豆腐」という気にさせられました。ちなみにトップ画像がフェードすると、美味しそうなお豆腐と、これまたいい感じに強烈なインパクトのデコトラが見れます。サイトにアクセスしたらすぐスクロールしないで、フェードを待つことをお勧めします。このサイトはショップサイトとしての機能もありますが、「男前豆腐店」というワードを一発で覚えるブランディング力があるため、ブランディングサイトとして紹介しました。完全に好みだったからというのもあります。「本物の男前はあなたを裏切ったりしない」「抱かれたい豆腐NO1」など、パワーワードも満載です。豆腐はあまり食べませんが、定期的に覗きたくなるサイトです。ブランディングサイトは、ユーザーを一瞬で自社のファンにできるポテンシャルを秘めています。「〇〇といったらあの会社だよね。」となれば売上を大きく伸ばせる可能性もあります。自社のブランドコンセプトが確立されているのであれば、導入を検討すべきサイトといえます。リクルートサイト採用活動に特化したサイトで、求職者をターゲットとし、社風や職場情報、業務内容、福利厚生などが主なコンテンツとなります。最近はインターネットを活用して求人情報を探すことも多いため、専用のリクルートサイトを作る企業が増えており、採用活動が活発な企業では、毎年リニューアルすることも珍しくありません。出典 : 株式会社ロッテ "お口の恋人"ロッテはお菓子が主商品だからか、全体的にPOPなデザインになっています。ロッテのお菓子が好きな人にとっては、見ているだけで楽しい気分になりそうなサイトですね。すでにロッテを知っていて、働きたいと思ってる人がターゲットをしているためか、商品説明などはありません。先輩からのメッセージや1日のスケジュール、商品開発ストーリー、募集要項、研修制度など、求職者に必要な情報をしっかり網羅されています。入社後に自分が働く姿がイメージしやすい、非常に完成度の高いリクルートサイトです。求人誌や求人ポータルに広告を出稿するよりも詳細な情報を提供することで、より効果的に求職者にアプローチできるため、スムーズで人的コストを抑えた採用活動が可能になります。オウンドメディア自社が持つノウハウ、ユーザーに役立つ情報を発信するためのサイトで、検索エンジンやSNSでの集客が最もしやすいタイプです。よく見る形はブログサイトです。食料品メーカーでは食育について、インテリア・雑貨店などは自社製品を使っての暮らし方やお勧めレイアウトなど、自社のサービスや商品に関連付けた役立つ情報を発信し、購入意欲を刺激しています。出典 : TERIYAKI TERIYAKIは、グルメアプリを開発している株式会社TERIYAKIが運営するオウンドメディアです。「絶対外さない美味しいお店」をコンセプトに、アプリ内では伝えきれないお店の情報などを発信しています。食に対する情熱が凄い「テリヤキスト」と呼ばれる人々がイチ押しのお店を紹介し、サイトをプロデュースした堀江貴文氏もテリヤキストとして参加しています。よくあるグルメサイトは雰囲気や接客など総合的にお店を評価することが多いですが、TERIYAKIではとにかく「味」にフォーカスしたグルメ情報を掲載しています。サイト下部にアプリのダウンロードボタンが設置され、サイトで見たお店を予約するためのダウンロードを促しています。同じような流れで、自社に関連付けた情報を発信し、購入や申し込みへの導線を作っておくのがオウンドメディアの基本パターンとなります。ナーチャリング（顧客の育成）にも適していて、潜在顧客・見込み顧客・既存顧客など、セグメントに合わせてコンテンツを発信することで、購入意欲を段階的・継続的に高めることができます。目的に最適な種類を選びましょうご紹介したように、ホームページは目的によって作るべき種類が変わります。目的が同じであっても種類によって効果が大きく変わることもあります。新商品を出すなら、コーポレートサイトへのページ追加よりランディングページを使った積極的なプロモーションをかける。採用に力を入れるなら、リクルートサイトを使ってポータル掲載費を抑え、担当者の負担を減らし選定や面接などに時間を割ける環境を整える。といった感じです。販促やプロモーションなど、ネット上での企業活動が重要になっている昨今、1社で目的別に複数のサイトを持っていることも珍しくありません。コストはかかりますが、それ以上に大きなバックを得られる可能性を秘めているのがホームページです。ぜひ、それぞれの役割や効果を把握して、ホームページ作りに役立ててください。

ホームページ制作のお金に関するお話し

2022.7.22

ホームページ制作

「ホームページをつくろう！」と思ったとき、最初に気になるのが費用についてではないでしょうか。規模にもよりますが、数十万から高ければ数百万円になることもあります。金額も大きいですし、相見積もりを依頼することも多いと思います。しかし、ホームページ制作の見積りなどそう何度も取るものではありません。見積りを見ても項目の内容が分からない。そもそも必要な項目かも分からない方も多いと思います。そこで、制作会社が提示する見積りの中でも、定番の項目についてご説明します。単に金額だけで決めるのではなく、何にいくらかかるか、どこまで対応してくれるかを把握したうえで、自社の要望をしっかり叶えてくれる制作会社を選んでください。ディレクションお客様とのやり取り、スケジュール管理、進捗管理、クオリティ管理などがディレクションです。提案書や企画書の作成、ヒアリング、デザイナーやコーダー、カメラマンのスケジュール調整なども含まれます。デザイン参考サイトやお客様の要望からデザインカンプをつくる作業で、テンプレートか完全オリジナルかによって費用が大きく変わります。トップページは重要なページなので、どの制作会社もほぼ必ずデザインします。1～3パターン程度のデザインを提案し、お客様が指定したデザインに修正を加え完成させます。会社概要などすべての下層ページでデザインカンプをつくることは少なく、主要ページだけつくってイメージを共有することが多いです。ロゴ制作などもデザインに含まれます。「デザイン修正は〇回まで」という設定をしている制作会社も多いので要確認です。修正回数は1～3回での設定が多く、それ以上の修正には追加費用が発生することもあります。修正を依頼するときは要望をまとめ、なるべく少ない修正回数でデザインを完成させることをお勧めします。コーディング（構築）完成したデザインカンプをもとに、インターネット上で実際に見れる状態にする作業です。動きなどもなくシンプルにするか、スクロールしたときにフワッと文字や画像が浮き出るようにするかなど、仕様で作業時間や費用が大きく変わります。 PR動画をホームページに埋め込むなどの作業も、コーディングに含まれます。撮影画像や動画の撮影費用です。お客様から提供された写真や無料素材などからも画像はつくれますが、プロが撮影した写真から画像をつくるほうが、ホームページのクオリティは間違いなく高くなります。採用サイトや商品のPR用サイトは、イメージがとくに重要になるときは、イメージ動画を載せることも多くなります。コピーライティング主にキャッチコピーやテキストコンテンツをつくる作業です。お客様からのヒアリングや同業他社サイトなどを参考にコンテンツをつくります。レスポンシブ対応スマートフォンでホームページをきれいに表示させるための作業です。スマートフォンユーザーを取り込むためには必須となります。基本対応として、コーディング費に最初から含まれていることもあります。更新機能カスタマイズブログや実績など、お客様が更新しやすいよう管理画面をカスタマイズする作業です。普段からブログサービスなどを使っていないと更新作業に想像以上に時間がとられるので、頻繁に更新する予定であればカスタマイズしたほうが無難です。システム構築問合せフォームやショップサイトのカート機能、顧客管理システムなどを構築する作業で、仕様によって金額が大きく異なります。初期設定ドメインやサーバーの設定、ホームページを構築するためのシステム導入、SSL対応などにかかる費用です。保守管理費ドメインやサーバーの管理、ホームページデータの保守、アクセス解析などにかかる費用です。文字修正や画像差し替えなど、簡単な修正も含まれていることもありますので、保守管理の範囲はしっかり確認しましょう。「自社にとって適正か」を見極めるホームページ制作の見積りは項目が多く、制作会社によって同じ作業でも項目名や内容が違うこともあります。すべてを覚える必要はありませんが、ざっくりでも理解しておくと、どこにどれだけ費用がかかるのか把握しやすくなります。また、金額は求めるクオリティや仕様によって大きく変わります。他の会社が80万円で制作したと聞いていても、要望によっては100万円を越えることもあれば、逆に安くなることもあります。自社がしたいことを実現できるか、見積りに必要な項目は含まれているか、無駄なコストがないかをチェックしてください。数社に自社がやりたいことを伝え、必要な機能などアドバイスをもらうのもいいでしょう。提示される金額、自社の要望など総合的に判断し、「自社にとって適正な金額」で、求めたホームページをつくってくれる制作会社を見つけてください。

超便利！「Trello」で始めるタスク管理

2022.7.22

お役立ち

突然ですが、タスク管理って大変ですよね。特に複数の人が関わる案件だと、情報がちらばって探すのも一苦労…本来の仕事になかなか集中できない！という状況も多いと思います。そこで、今回は複雑なタスク管理を簡単にしてくれる「Trello」をご紹介したいと思います。使い方が非常にシンプルなので、誰でもすぐ使える便利なツールで、弊社でも愛用しています。ぜひ、「Trello」を使ってタスク管理に悩まされない快適ライフを手に入れてください。 Trelloとは個人からチームのタスク管理まで、幅広く対応できるツールです。「ボード」「リスト」「カード」という機能を使い、カンバン方式でタスクを管理できるようになっています。トレロを始めようアカウント作成 ①公式サイトにアクセスし、入力欄にメールアドレスを入力したら「アカウントを制作-無料です。」をクリックします。 ②サインアップをクリックします。 ※「Google」「Microsoft」「Apple」のアカウントでログインすることも可能です。 ③①で登録したメールアドレスに承認メールが届くので、「メールアドレスを認証」をクリックします。 ④氏名（Trelloで使うユーザー名）を入力して「サインアップ」をクリックします。 ⑤ホーム画面が表示されたら登録完了です。 Trelloをつかってみようアカウントができたら、いよいよ快適なタスク管理の始まりです。上の画像は、実際にタスク管理をしている画面です。デモなのでかなり簡単に作りましたが、こんな感じで案件ごとにタスクの管理、進捗の視える化ができるようになります。ここから、実際に上の画像のような管理を始めるための手順を紹介していきます。ボードをつくる ①ホーム画面の「作成」をクリックし、「ボードを作成」をクリックします。 ②「背景」「ボードタイトル」「公開範囲」を設定したら「作成」をクリックします。公開範囲で「公開」を選択すると、外部の人からも見えてしまいます。基本は「ワークスペース」を選択し、個人のタスク管理に使う場合は「非公開」を選択してください。 ③ボード画面が表示されたら設定完了です。無料プランでは1チームあたり10枚までボードを追加できます。 1枚のボードをチームで閲覧・管理したい場合は、「共有する」をクリックし、共有したい人にメールを送るかボードのリンクを共有します。リストをつくる ①デフォルトで用意されているリストを編集し、必要なものを追加します。リストを追加するときは「もう1つリストを追加」をクリックし、タイトルを入力して「リストを追加」をクリックです。リストはドラッグ&ドロップ感覚で自由に移動できます。リストが完成した状態がこちらです。 WEB制作の工程をリスト化しています。カードをつくる ①「カードを追加」をクリックし、カードのタイトルを入力したら青い「カードを追加」をクリックします。カードをクリックすると、詳細な設定ができます。主な項目は下記の7つですが、必須ではありません。必要に応じて設定してください。・説明・メンバー・ラベル・チェックリスト・日付・添付ファイル・カバー説明カードタイトルの下にある説明欄はフリーテキストエリアになっていて、お客様の基本情報や要望などを自由に記入できます。リンクも有効でデザインの参考サイトを入れることもあります。必要な情報を入れ、保存ボタンを押したら設定完了です。メンバータスクごとに担当者を割り当てる機能です。まずは右メニューの「メンバー」をクリックします。ボードを共有しているメンバーであれば、アイコンと氏名が表示されるので、クリックすればメンバーに追加されます。ボードを供していないメンバーの場合は、氏名の欄に相手を入力して「メールを送信」をクリックすると招待メールが送られます。ラベル右メニューの「ラベルを」クリックし、各ラベルの横にある「鉛筆マーク」をクリックします。「名前」と「色」を設定し「保存」をクリックすればラベルの完成です。色だけで分ける場合は、上記の設定は不要です。ラベルをクリックすると、カードに設定されます。チェックリストカードごとにチェックリストをつくる機能です。業務ごとのタスクを可視化し、進捗状況も把握できるため、おすすめの機能です。右メニューの「チェックリスト」をクリックし、タイトルを入力して「追加」をクリックします。チェックリストの下にサブタスクを入力します。このカードでは、WEB制作に必要なサブタスクをざっくり設定してみました。サブタスク横のチェックボックスをクリックすると進捗状況が更新されます。日付右メニューの「日付」をクリックし「開始日」「期限」「リマインダー」を設定し、「保存」をクリックします。リマインダーを設定しておけば、タスクの確認漏れを防ぐこともできます。添付ファイル画像や動画、PDFなど、さまざまなファイルを添付できます。右メニューの添付ファイルをクリックし、デスクトップやオンラインストレージから直接アップロードします。ファイルを直接ドラッグ&ドロップしてのアップロードも可能です。カバーカバーに色やイメージを付ける機能です。タスクにアイキャッチを付けたいときなどに利用します。右メニューの「ラベル」をクリックし、色もしくはイメージを選択し、サイズを決めたら設定完了です。快適なタスク管理を始めましょう今回紹介したのは基本的な機能だけですが、自分流にカスタマイズしたり、使い方を応用したりすれば、Trelloだけで複雑なタスクを簡単に管理できます。集中して仕事をできる時間が増えると、退社時間も早くなり、プライベートの充実するなど、嬉しい効果も期待できます。ほかにも、いろいろな機能を搭載した便利なツールなので、ぜひ自分流の使い方を探してみてください。

【ブラウザ別】さくっとキャッシュをクリアする方法

2022.7.20

ホームページ制作

ホームページ制作の現場では、こんなやり取りがたびたびされています。制作会社：「ホームページを更新したので確認をお願いします。」お客様　：「あれ？変わってないけど…」制作会社：「キャッシュを消してもらえませんか」お客様　：「キャッシュって？どうやって消すの？」更新したと連絡があり、確認したら変わっていない。ホームページ制作あるあるの1つです。 WEB関連の仕事をしていない方には、あまり馴染みがないかもしれませんね。社内ブログを更新しても内容が変わらないときも、キャッシュが悪さをしている可能性があります。更新された内容をすぐ確認したい！というときのために、ショートカットキーを使ってさくっとキャッシュを消す方法をご紹介します。同じ消し方が多いので、1つ2つ覚えておけば、だいたいのブラウザは対応できると思います。 ※キャッシュの詳しい説明はブログの最後でしています。興味のある方は見てみてください。 Windows / Mac Google chrome 【Windows】 1. Ctrl + F5 2. Ctrl + 更新ボタン【Mac】 Command + R Edge 【Windows】 1. Ctrl + F5 2. Ctrl + 更新ボタン FireFox 【Windows】 1. Ctrl + F5 2. Ctrl + Shift + R 3. Shift + 「再読込み」ボタン【Mac】 Command + Shift + R Safari 【Mac】 Command + R スマートフォン iPhone（Safari) 【クリックで拡大】 1. 「設定」をクリック 2. 「Safari」をクリック 3. 「履歴とWebサイトデータを消去」をクリック 4.「履歴とデータを消去」をクリック Android（Google）【クリックで拡大】 1. 「設定」ボタンをクリック 2. 「アプリと通知」をクリック 3. 「〇個のアプリをすべて表示」をクリックし、「Chrome」を探してクリック 4. 「ストレージとキャッシュ」をクリック 5. 「キャッシュをクリア」をクリックキャッシュについて詳しく最後にキャッシュについてご説明しますが、正直知らなくてもまったく困りません。興味のない方はスルーしちゃってください。【キャッシュとは】アクセスしたホームページのデータ（テキストや画像など）を、一時的にブラウザに保管しておく技術です。同じサイトに再度アクセスしたときに、インターネット上のデータではなく、ブラウザに保存されたデータを参照します。そのため、 ①ホームページの表示時間が短くなる ②データダウンロードにかかるパケットを節約できるなどの効果が得られます。本日はここまでです。最後までお読みいただきありがとうございます！

印象がガラッと変わる「カラー」の選び方

2022.7.19

ホームページ制作

ホームページにとって「カラー」はとても重要です。ホームページ制作の際のヒアリングでも「カラーはなにがいいですか？」とかなりの確率で聞かれるはずです。同じデザインでも、カラーによっては人が受ける印象が180度変わることもあります。すでにイメージがあったり、コーポ―レートカラーがあったりすればすぐに決まると思いますが、そうでない場合、かなり迷うかもしれません。そこで、今回はカラーの選び方や、与える印象などを解説します。ぜひ、カラー選びの参考にしてみてください。カラーの種類ホームページのカラーは「メインカラー」「ベースカラー」「アクセントカラー」の3つに分けられます。 ●メインカラー : ホームページの印象を決める主役の色 ●ベースカラー : 余白や背景に使われる色 ●アクセントカラー : メイン・ベースを引き立て、全体を引き締める色カラーの選び方まずはメインカラーを決めます。メインカラーが決まったら、与えたい印象やデザインなどを考慮しながらベースカラー、アクセントカラーを決めていきます。コーポレートカラーで選ぶロゴマークや商品パッケージなどに使われるコーポレートカラーがあるなら、それをそのまま使います。コカ・コーラなら赤、WOWOWなら青のように、頭の中で自然に浮かぶコーポレートカラーは、メインカラーに最適です。企業イメージで選ぶ与えたいイメージを基準に選ぶ方法もあります。 ●カラーごとの印象赤 : エネルギッシュ、インパクト、興奮、情熱青 : 信頼、安心、知的、誠実、理性、清潔感オレンジ : 親しみ、元気、楽しい、活発黄色 : 楽観的、明るい、快活、希望、陽気、若々しさ緑 : 健康、リラックス、安らぎ、穏やか紫 : 神秘的、高貴、優雅、癒し白 : 清潔感、信頼、平和黒 : 神秘、威厳、高級、モダンたとえば、スポーツジムなどは快活さや元気なイメージを与えるオレンジや黄色が合います。高級車や高級レストランは高級感を持たせる黒が合います。近い色のグレーも高級なイメージを持たせられます。レクサスもコーポレートカラーにグレーを採用しています。このように、カラーによって与える印象がかなり変わります。会社やサービスに合わせて最適なものをチョイスしてください。ベースカラー、アクセントカラーを決めるメインカラーが決まったらベースカラー、アクセントカラーです。それぞれが引き立つカラーを選択してください。問い合わせや資料請求ボタンなど、目立たせたい情報にはアクセントカラーを使います。どうしても決められないときは、メインカラーの補色を使えばメリハリを持たせられます。 ●よくある補色の組み合わせオレンジ×青赤×青緑黄色×紫緑×赤紫水色×朱色補色ってどうやって調べるの？というときは、下の無料ツールがお勧めです。補色や類似色、3色配色など、グラデーションやアイコンイラストなどで簡単に色を確認できます。ツールを使ってみるほかにも「色組みあわせツール」などで検索するとたくさん出てくるので、使いやすいツールを探すのも面白いかもしれません。【2022年版】おすすめカラーパレットツール10選でほかにもツールを紹介しています。興味あればチェックしてみてください。カラーが与える印象ここからは、ホームページを実際に見比べて、印象の違いを見てみたいと思います。バーミヤン｜情熱的・エネルギッシュな赤出典 : バーミヤンバーミヤンはカンパニーカラーの赤を採用しています。同じグループ店のガストや夢庵も同じく赤がメインカラーになっています。ガツンとしたメニューが多い中華料理店によくマッチしています。エネルギッシュな印象のほか、食欲を刺激する色なので、飲食関係ではよく使われています。「中華は火力が命だ！」というパッションも伝わってきますね。サイゼリア｜リラックス・安らぎの緑出典 : サイゼリア深い緑から、リラックスしながら食事を楽しめるという印象を受けます。イタリアンレストランだからか、トップ画像のトマトと合わさってイタリアの国旗を思い出しました。狙ってはいないかもしれませんが、色一つでさまざまなイメージを与えるということがよく分かります。ココス｜明るい・楽しいの黄色出典 : ココスココスは明るく楽しいイメージが浮かぶ黄色がメインカラーになっています。誕生日に店員さんが「ハッピーバースデー」を歌ってくれたり、盛り付けに遊び心があったりするココスの雰囲気にピッタリです。スイカのかき氷も結構遊んでいますね。舌だけでなく目でも楽めます。ホームページは「カラー」でガラッと変わる同じデザイン、同じコンテンツでも、使うカラーでホームページの印象がガラッと変わります。カラーコードまでしっかり選ぶ必要はありませんが、なんとなくでも選んでおくと、制作もスムーズに進みます。どうしても選ぶのが難しいなら、制作会社に相談する方法もあります。メインカラーはもちろん、与えたいイメージからベースカラー、アクセントカラーも最適なものをチョイスしてくれるはずです。今回紹介した以外にも、他社のホームページを眺めるだけでイメージができることもあります。ぜひ、いろいろなホームページを見て、自社にピッタリのカラーを探してみてください。

ホームページ制作ってどれくらいかかる？発注から完成までのスケジュールと流れ

2022.7.19

ホームページ制作

ホームページがどれくらいで完成するかご存じですか？おそらく、みなさんが思っている以上に時間がかかります。「次のキャンペーンまでに公開したい」「そろそろ採用シーズンだからリクルートサイトを準備しなきゃ」と、いざ制作会社に依頼したら、時期によっては間に合わなかったり、突貫制作でクオリティが低かったりという可能性もあります。せっかくなら、余裕を持ったスケジュールで、クオリティの高いホームページをつくりたいですよね。そこで今日は、ホームページ制作にかかる時間や流れをざっくりとご紹介します。「良いホームページ」をつくるための参考にしてもらえると嬉しいです。ホームページ制作の流れ制作会社によって多少違いはあると思いますが、まとめると下のような流れになります。 01 ヒアリングヒアリングでは、どんな結果を出したいか、どんなターゲットに見てほしいか、どんな内容を掲載して、なにを伝えたいかなど詳しくお聞きします。デザインやコンテンツの方向性を決める重要なポイントです。「自社商品・サービスの良さ」「これだけは他社に負けないところ」「お客様に対する想い」など、情報が多いほどホームページのクオリティが高まります。たくさんの「良い情報」を集めてみてください。 02 企画・設計ヒアリングの内容をもとに、全体の構成を考えます。トップページのほか、会社概要やサービス紹介、問合せなど必要なページを洗い出し、各ページに掲載する内容も決めていきます。同時に、どんなデザインがいいか、カラーはどうするかなど他社サイトなどを参考にイメージをつくっていきます。全体の構成、デザインの大まかなイメージができたら、デザインに入ります。 03 デザイン提案参考サイトや構成をもとに、実際のホームページデザインをつくります。デザインが確定したら構築になりますが、構築が始まってからのデザイン変更は、大幅なスケジュール調整が必要になります。 3ヶ月の完成予定が、4ヶ月、5ヶ月に延びた…という可能性もあるので、デザインの確定は慎重にしてください。 04 構築デザインが確定したら、テスト環境でホームページを構築し、最終確認後に公開となります。ホームページ制作のスケジュールホームページ制作の期間はページ数やデザインの複雑さなどで変動しますが、大まかなスケジュールは下のとおりです。コーポレートサイト（2～4ヶ月）一般的なコーポレートサイトです。 5～15ページくらいが主流で、リクルートサイトも同じような規模になることが多いです。サイトを見るヒアリング 5～10日企画・構成 2～3週間デザイン 2週間～1ヶ月構築 1～2ヶ月 ECサイト（2～4ヶ月）自社ECサイトです。登録商品数やカスタマイズの幅などでスケジュールがかなり異なります。サイトを見るヒアリング 5～10日企画・構成 2～3週間デザイン 2週間～1ヶ月構築 1～2ヶ月ランディングページ（1～1.5ヶ月）特定なサービスや商品などを紹介する1ページ構成のホームページです。イベント告知などでもよく制作されます。サイトを見るヒアリング 5～10日企画・構成 1～2週間デザイン 1～2週間構築 1～2週間ホームページ制作は余裕をもってご依頼を！ホームページ制作にかかる時間やスケジュールなど、なんとなくでも把握していただけたでしょうか？今日ご紹介したのは一般的な目安で、規模や内容によってかなり変動します。+1ヶ月ほど余裕を見れば、じっくり腰を据えて取り組めると思います。制作会社としては、お客様のご要望に全力でお応えしたいという気持ちが当然ありますが、どうしても「無理！」というケースも実際にあります。すでに公開時期などが決まっているものなどは、できるだけ早く制作会社に依頼することをお勧めします。

ホームページをリニューアルしました!

2022.7.08

お知らせ

こんにちは！暑い日が続きますね。各地で観測史上最高気温を更新しています。6月の猛暑日連続記録が3日から6日に更新されました。だからというわけではありませんが、ルビコンのホームページも更新しました。約2年ぶりの全面リニューアルです。これまでのホームページも気に入ってましたが、結構突貫でつくったので、細かい部分にまで手を入れれていませんでした。なので、今回はがっつり計画を立てました。コンセプトは「シンプルに見やすく」「速く」です。他にもいろいろありますが、この2つが大きなコンセプトになっています。なんで「シンプルに見やすく」したか一番の目的は、ユーザーが迷わず、早く情報に辿りつけるようにするためです。「なにか新しい情報ないかな」「どんなホームページつくってるの」と思ったとき、ページをすぐ見つけられるよう、動線やレイアウト、コンテンツの置き場所など、構成全体を見直しました。デザインもなるべくシンプルにしました。見やすさ優先というのもありますが、個人的に「シンプルイズ見やすい＆かっこいい」だよね！という想いがあるからです。それをデザインコンセプトにして、後はデザイナーさんに丸投げ（←おい！）しました。できあがったのがこのホームページです。雰囲気がガラッと変わっています。リニューアル前リニューアル後「見やすいレイアウトで」「白黒ベースがいいなー」要望はこれだけという無茶ぶりに、全力投球してくれました。とても見やすく、かっこいい良いホームページになったと思うので、いろいろなページを見てもらえたら嬉しいです。なんで「速く」したかホームページを速くした目的はいろいろありますが、まとめると下の3つです。 SEO的にいいこれはかなり昔からいわれていましたが、2018年にGoogleが「ランキング要因にする」とアナウンスしてからページスピードがより重要視されるようになりました。快適に見てもらいたいユーザーに快適に見てもらいたいからです。ホームページを開いたりページを移動したりするとき、すぐ開かないとじれったいですよね。それをなくして快適に見てもらいたかったからです。問合せが増えるかも？表示に3秒以上かかるページは40％以上のユーザーが離脱するといわれています。問合せしてくれたかもしれないユーザーを「表示スピードが遅いだけ」で逃すのはとても残念ですよね。どれくらい速くなったのか今回のリニューアルで1番チカラを入れたのがこの「高速化」です。あれこれ試した結果、かなり速くすることができました。リニューアル前＜PC＞＜スマホ＞リニューアル後＜PC＞＜スマホ＞ Google公式ツールで採点した結果、点数が大幅にあがっていました。特にスマホは31点と散々な点数でしたが、一気に97点まで上昇しました。ブラウザでの表示速度も1.71秒 → 0.42秒と「4倍速く」なりました。「3倍速く」を越えてきましたね。嬉しい結果に大満足です。ぜひストレスフリーなスピードをお楽しみください。表示スピードの採点には「PageSpeed Insights」というツールを使いました。 URLを入力するだけで、表示スピードを採点することができます。興味があれば使ってみてください。 PageSpeed Insights ブラウザの表示スピード計測には「Page load time」というブラウザの拡張機能を使いました。 Google ChromeやMicrosoft Edge、VivaldiなどのChromium系ブラウザで使えます。興味があればインストールしてみてください。 Page load time – Chrome ウェブストアいろいろなホームページをスピードチェックしていると、ちょっと楽しくなってきます。これを機に新しい一歩をホームページをリニューアルしたことで、気持ちも新たに、より良いサービスを追求していこうという意欲がさらに燃え上がりました。今回のリニューアルでは新しい知識・技術をあれこれ試し、実装しました。それらを反映させたより良いホームページをお客様に提供していきたいと思います。これからもルビコンをよろしくお願いいたします。