ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた

Webデザイナー初心者の方は、日々の仕事で知識やスキル不足に頭を悩ませる場面が多いのではないでしょうか。だけど時間もお金も足りない新人にとって、学校に通ったり、腰を据えて教科書を読んだりというのはなかなか難しいもの。 そんなときは、Web上の有益なサイトで勉強するのはいかがでしょう。今回はWebで見ることができる、教科書並の情報量のサイトや、Webデザインの参考になるサイトなど、全部で20サイトをまとめました。 Webデザインの教科書として読みたいサイトまずは、Webデザインの基本から応用まで網羅的に揃っていて、まさに教科書のように使えるサイトを紹介します。どれもブラウザに開いて常備したいサイトばかりです。 1. Webデザインレシピ ※2020年8月現在、掲載終了 一つひとつの記事にボリュームがあり、ここを読めばWebデザインについて体系的に学べる、まさに教科書のようなサイトです。サイト

こんにちは、管理部のtetsuです。 Webサイトのシステム構築をする際、サイトによってはSSL証明が必要になることもあるかと思います。 最近では、GoogleがSEOの指標の1つとして「SSL対応をしているか、常時SSLをしているか」を見るという話もあるので、SSL通信にするかどうかで悩んでいるWeb担当者の方などもいらっしゃるのではないでしょうか。 今回は、システム開発会社「エスロジカル」さんにご協力いただき、SSL証明書の基本から、購入・更新時に知っておきたい正しい選び方までをまとめました。新規でSSL証明書を発行しようとしている方や、SSL証明書の更新が迫ってきている方は、ぜひ参考にしてみてください。 そもそもSSL通信とは？ SSLとは、Secure Sockets Layer の略称で、インターネット上の通信を暗号化する技術のことです。Webサーバとクライアント（PCやスマホな

知ってるつもりで意外と知らないSEO最新のキホン 第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント 2015年03月24日 TEXT：押谷圭佑（ヴォラーレ株式会社） こんにちは。ヴォラーレ株式会社の押谷です。前回はリニューアルにおけるSEOの全体感の説明をしましたが、今回はより実践的で細かな施策を紹介します。 クライアントに「いま手がけているWebサイトのSEOもお願いしたい」と依頼された経験のあるWebデザイナーや、Web担当者を兼務しているWebデザイナーは、WebサイトのSEO対策を考えたことが一度はあると思います。そうしたWebデザイナーのために、押さえておくべき18のSEO内部施策に関するポイントを紹介していきます。 ■HTMLの調整 基本的に、1ページに対して1テーマ（キーワード）として対策します。これはSEOにおけるHTMLの調整の基本であり、対策する

スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景

TL;DR 筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。起業から少し時間が経ったので記憶があいまいですが、ざっくりとした流れと気をつけておきたいことをメモしています。 創業前に準備すること 起業前に事業内容と企業理念を決定し、会社案内資料をパワポで作成しておきます。内容は企業理念・事業内容・解決できること・会社概要など。 １．定款作成前 定款作成前に準備しておきたいこと、事務所について調査しておくべきことのリストです。実印・銀行印・角印・ゴム印に関しては司法書士さんに社名の重複がないか調べてもらった後に作成します。 事業所物件候補を見つけたら、不動産屋に連絡 回線がひけるかどうか聞く 改装可能か、どこまで改造出来るか聞く 計画している事業内容で賃貸可能か確認 信用審査があるので待つ 審査 OK でテナン

主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの

HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ

こんにちは！　メディア事業部のきょうへいです。 先日SEOコンサルティング、サポートをおこなうヴォラーレ株式会社「SEO HACKS」さんのセミナー「ゼロからのSEO担当者育成講座」に参加してきました。 最近LIGではWeb業界以外からの転職者が増えてきて、先輩社員がそういった方に“SEOを教える”機会が多くなっています。 しかし、ここでひとつ大きな課題になるのが、僕自身が体系立ってSEOを勉強したことがない、ということです。SEOをなんとなくやっている、という担当者も案外多いのではないでしょうか。 このセミナーは、新しくWeb業界に入ったり企業のWeb担当になったりした方に、SEOがどのようなものかをゼロから丁寧に解説するものでした。6時間と長丁場でしたが、やはり得られたものは大きかったです。 今回は、僕が後輩に“SEOを教える”にあたり、参考になりそうな部分を抜粋してご紹介したいと思い

自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント

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

Evernoteを掃除してたらでてきたCSS系の小技をまとめてみた。 ソースみたら納得するものの時間がったたら忘れるやつ。 サンプルないとわかりづらいかなと思ったので一部追加 よく忘れるCSSの小技 - jsdo.it [css] clear fix

こんにちは、デザイナーのサリーです。 LIGが運営するシェアオフィス「いいオフィス」では連日イベントが行われており、お客様からイベントに関するお問い合わせも多く頂くようになりました。 そこで、いいオフィスサイトにイベントカレンダーを表示しよう！ということに。 しかし、Googleカレンダーのデザインが、サイトのデザインに合わなかったんです(´･_･`) Googleカレンダーは2011年に新しいデザインになりましたが、埋め込むときは青い枠のついた旧デザインしか選べません。あまり時間もかけられないし、難しいことはせずCSSだけ上書きしたい……。 何かいい方法はないかググってみたところ、「gcalendar-wrapper.php」というスクリプトを見つけたので使ってみたら、まさに求めていた挙動を実現できました！ 今回は、gcalendar-wrapper.phpの使い方についてご紹介します。

マーケティングを担当している方にはおなじみのことかと思いますが、Webサイトを作るにもコンテンツを作るにも、まずはペルソナを設定しますよね。しかしこのペルソナについて、意外としっかり説明できない、あまりよくわからないという人も多いのではないでしょうか。 今回はマーケティングにおけるペルソナとはどんなものなのか、意味や具体的な作り方、マーケティティングへの活用事例まで徹底解説します。 マーケティングにおけるペルソナとは、「商品やサービスを実際に利用する顧客の架空の人物像」という意味を持つマーケティング用語です。 ペルソナを作る時は、氏名や年齢、家族構成や住んでいる場所などの基本情報から、趣味・価値観などのライフスタイルまで細かく設定するのがポイント。細かく設定することで、より効率よく効果的なマーケティング戦略や施策を立てやすくなります。 ターゲットとの違い ペルソナとターゲットの違いは、ター

photo credit: tsevis via photopin cc こんにちは、@h0saです。最近業務でペルソナを作っていて、ペルソナ手法について自分の知識を見直しています。 今回は「ペルソナ」について聞かれた時に説明しやすいように、「ペルソナ手法」についてのあれこれをQ&A形式でまとめてみました。 なお、このまとめはペルソナのマーケティングでの活用ではなくプロダクト開発での活用を前提に書かれています。 更新履歴 2014年8月16日：「ペルソナをつくったあとにやることは？」と「捏造ペルソナ」について追記しました。 2017年7月29日：最新の経験と知識を元に、内容を加筆修正しました。 ペルソナとは何か？ ペルソナとは、ユーザーの行動パターンを調べ、そのデータを統合して作り上げたユーザーを代表する仮想の人物のことです。一体のペルソナの背後には、多くの人間が存在します。 1999年に

Facebookのいいね！ボタンがとても流行していますが、いいね！ボタンの真の力を発揮させるためには、Open Graph Protocol（OGP）の設定が不可欠なのはご存じでしょうか？ 今回はOGPとは何なのか、どのように設定すれば良いのかを調べてみました。 OGPとは？ OGPとは一言で言うと、そのWebサイトのタイトルやWebサイトの説明、制作者の情報やWebサイトの種別などを、ソーシャルメディア側から正しく認識できるように決まった形で記述しておく仕組みを作ろう、というものです。 OGPについての説明は下記サイトが非常にわかりやすく詳細に載っていますので、OGPを知らない方は是非目を通して下さい。 フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記 Facebookのいいね！ボタンはOGPが必須 タイトルにも記

当ブログは右サイドバーに月間とデイリー、2つの期間でアクセス数を集計した人気記事ランキングのウィジェットを設置しています。（PCブラウザで見ることが出来ます） このウィジェットの作り方は以前にも解説エントリーを書いたのですが、仕様変更が発生して内容を部分的に修正したため、ヤヤコシイ内容になってしまってます。 【参考】【カスタマイズ】月間とデイリー、2つの人気記事ランキングを設置する なので今回改めて書き直し、というか、まとめ直し。 WordPressのプラグイン「WordPress Popular Posts」は、各記事のアクセス数を自動的に集計し、データベースに記録を残してくれます。 そのデータベースに対して「1ヶ月単位で」「24時間以内で」など、好みの抽出条件を指定し、PHPコードで命令してあげることで人気記事のアクセスランキングを作る、という仕組み。 この仕組みを応用し、「現在表示し

今回のブログのリニューアルは、テーマファイルに直接書くのをなくしてカスタムフィールドで呼び出したり、ループを使って表示を変えてみたりしています。中でも一番やってみたかったのが、プラグイン「Wordpress Popular Posts」をウィジェットで使うのではなく、テンプレートタグで呼び出して自由にカスタマイズして使うということです。 WordPress Popular Postsのテンプレートタグの確認をした テンプレートタグを使うには、まずWordpress Popular Posts（以下wpp）のテンプレートタグを確認しなければなりません。これは、設定のよくある質問をみればわかります。 wpp_get_mostpopular()とwpp_get_views()です。 前者は、wppの表示に関するもの、後者はwppの個別投稿の閲覧数に関するものです。 今回の表示の目標はこんな感じで