こんにちは、フロントエンドエンジニアのライダーです。 空いた時間に、みんな大好き MDN を見ることがありました。そこで僕の知らなかったHTML要素をいくつか見かけたので、今回はそれらをまとめてご紹介したいと思います！ こんな要素あったんだ！ <dfn> https://developer.mozilla.org/ja/docs/Web/HTML/Element/dfn おそらく「define」の略称でしょう。 ひとつの文章（パラグラフ）のなかで、「strong」や「em」で重要度や、文脈を強調したりしているパターンはよく見られます。「dfn」もその並びにあると考えられ、ただの平たい文章に意味を持たせるために使う要素のようです。 株式会社LIG(リグ)は東京都上野を中心に「Life is Good」掲げて活動する社長がイケメンな事で有名な会社です。 上記は、「株式会社LIGの説明」の文章と

「ブログをやることの効果」や「キーワード設定などの SEO 対策」など、マーケティングやテクニカルな部分はよく語られる一方で、肝心の「ブログってどうやって書けばいいのか」というライティングのロジックについて教えてくれている記事はあまり見かけないように思います。これでは普通の人は、ブログを書こうと思っても書けませんよね。 そこで本日は、今からブログを始めたい、あるいは現状のブログを見直したいと考えている企業担当者やクリエイターの方に向けて、ライター初心者が LIG から学んだ良いブログ記事の書き方について嘘ナシでお伝えしたいと思います。 ちなみに、以下の内容はデジタルハリウッド東京本校で行われた『株式会社 LIG による「即採用の為のセルフブランディング講座」第 2 夜』での講義内容を中心に、僕が日頃の原稿チェックの際に LIG から受けた指摘やダメ出し、そして個人的な見解を一部補足したもの

これまでの僕は愚かでした、 “こんにちは、ナッツです。”なんてインパクトもなければ、心にも響かない単なる普通の挨拶で記事を書き出していたからです。 インターネットには無数の記事コンテンツ。検索すれば何でもすぐに出てきます。 人様のハートに残らない文章を書いてなんの意味があるのでしょうか？　僕は、説明書のような無味乾燥な記事を書くのはもうたくさんだ、と思いました。 そんなときに読んだコピーライティングの記事（英文）。「タイトルの次に重要なのは最初のセンテンス」として記事の書き出しについて紹介されており、「ああ、なるほどな」と。 そこで今回は、当記事より学んだことをナッツなりに解釈してご紹介していきます。毎回記事の書き出しに悩むというブロガー、ブログの滞在時間が短く最後まで読まれていないことにお悩みのブロガーは、ぜひ参考にしてみください。 読者の心をつかむ！9つの記事の書き出し方 1. 「イエ

日本のみなさん、こんにちはぁ！　2年カナダに住みましたが、最近日本に帰ることになったライター、のび太です。日本に帰ったらまずはソッコーで吉野家の牛丼を食いに行きたいと思いまーす！！ さて、WordPressでサイトを作る時にイチから作るのって結構大変ですよね？　とはいえテーマを使ってしまうと、いらない機能、余計なコードなどが入っていてカスタマイズにとても苦労します。 そんな時に便利なのがBlank WordPress Themesです。 Blank WordPress Themesとは？ カスタマイズを前提としたディベロッパー用のWordpressテーマです。Starter WordPress themesとも呼ばれています。ファイルには最低限必要なWordPress PHP、CSS、HTMLのみで、WordPressのベースだけがほしい、時間短縮したい時にはもってこいのテーマです。 今回

今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは

こんにちは、ディレクターのあゆみです。 Web業界にいて度々思うことなんですが、写真素材がもったいないな……と感じること、ありませんか？ Webサイトの素材、どうしよう？ クライアントからありがたくいただいた素材とはいえ、 「なんでここ切れちゃってるの……」「てゆうかこれピント甘くない……？」「どうして背景のオフィス、もうちょっと気を使わなかったの……（ボケてるとはいえ、ほかの社員こっち見てるのわかるし、机の上もなんだか散らかってるし、商品名想起できるペットボトルとかあるんですけどーーーーー！）」「色々Photshopの魔法をかけたけどやっぱり無理！！！　奥の手で人物切り抜いて背景敷こうと思ったけど、F値下げすぎてて髪の毛の切り抜き微妙！！！　すごい微妙！！！！！」 って経験、ありませんか？ なおかつここ1〜2年で、ビジュアル面にこだわるサイトが増えてきたもんだから、写真クオリティのピンキ

ミッション！ ではさっそく、今回のミッションを発表します。 こちらの写真を・・・ こちらの写真に変えるのです！ そもそもAdobe Photoshop Lightroomとは？ 「Photoshop」という単語が入っているけど、「Photoshop」とはどういう関係なの？と、Lightroomが初耳の方なら誰もが首を傾げるでしょう。 公式サイトの文言を見てみましょう。 Lightroom とは何ですか？また、どのような人を対象としていますか？ Adobe Lightroom は、初心者からプロフェッショナルまで、あらゆるレベルのユーザーが写真に必要なすべてのツールを搭載しています。Lightroom は、コンピューター、Web、iPad、モバイルデバイスなど、どこにいても写真を整理、編集、共有できます。お気に入りの写真を編集したり、フラグ付け等の作業をしても、他のデバイスにも全ての編集作業

こんにちは、ライターの内藤です！ 前回の記事（美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ）ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。 今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。 目次 ※もちろん順番に読む必要はありません。 スマホ専門デザイン見本 部品別に見られるサイト その他スマホサイトの部品作りの参考になるサイト スマホサイト素材になるキット フリック用JavaScriptプラグイン スマホ対応の無料WordPressのテーマ スマホサイト制作参考 スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ http://iphonedesignarchive.jp/ 登録数が半端ないです。 カテゴライズは業種別のみですが、年月アーカイブがあるので、い

こんにちは、メディア事業部デザイナーの佐藤タカアキ（@sato_tkaaki）です。 最近隣の席のまゆが時折「ふふっ。ふふふふふ」と一人で呟いているのを見て底知れない闇を感じずにはいられません。 ところで皆さんは、闇と雨の関連性については知っていますか？ ここでいう闇とは心の闇のことで、人は雨を見ると心の闇をさらけ出すことに躊躇しなくなるらしいです。（たしかに雨の日のTwitterは皆いつもと違う気がする・・・） また、映画やドラマでも雨に降られるシーンは悲しみを表現していることが多いですよね。 そんなこんなで、今回はPhotoshopを使って簡単に雨を降らせる加工方法をご紹介したいと思います。 せっかくの機会なので、人物モデルに「水もしたたるいい男」を用意しました。 それではいってみましょう。 写真を読み込む まずは雨を降らせる前に、人物や背景などの下準備から始めていきましょう。 Pho

こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht

オハヨウからオヤスミまで。ディレクターの鮫島です。 今回から全3回にわけて「ワイヤーフレーム」の考え方や書き方などをお届けいたします。 第1回となる今回は、ワイヤーフレームの役割や考え方など思想的な部分をお伝えします。 第2回はワイヤーフレームの作成前に準備するべきことなどをお伝えし、第3回は実際にどう書いたらいいか、などをお送りする予定です。 ワイヤーフレームの書き方や考え方は人それぞれ微妙に違うかとは思いますが、私の考え方が少しでも何かの参考になれば嬉しいです。 ワイヤーフレームとは 簡単に言えば「何を・どこに・どのように」が記載された「サイト設計図面」です。 つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、お客様や制作者と認識を合わせるためのものです。 例えば家を建てるとき、設計図面がないと大工さんはパニックになりますよね。きっと。大工さんみんなの認識が

こんにちは、じつかわです。ヴォラーレという会社でSEOコンサルタントをしています。 現代のWebビジネスを考える際、もはやスマホを無視して考えることはできなくなってきています。ここ1〜2年で、「スマホのSEOってどうすれば良いの？」という声も大変よく聞くようになってきました。 実際のところ、スマホサイトを構築する際にSEO的な要件はどうすればいいんだろうか……と悩まれる方は多いかと思います。今回はそんなスマホとSEOの関係についてマル�ッと紹介したいと思います。 「スマホ専用の検索ランキング」は存在する？ いきなりすこし込み入った話をしますが、かなり注目度の高い重要な質問だと思います。 スマホのSEOを考えるときにまず話題になるのが、「スマホ専用の検索ランキング」というものが存在するのかどうか。スマホサイトを持っていなければ検索上不利になるのか、スマホ向けのユーザビリティがどこまで加味され

こんにちは。デザイナーの藤田です。 久しぶりにPhotoshopのtips記事をお届けします。 皆さんは�“水しぶき”などの背景が透けた画像の切り抜きに苦戦したことはありませんか？ ただ背景を切り抜くだけだと、透明感をなかなか表現できませんよね。 そこで今回は、“水しぶき”などの透け感がある画像をみずみずしく切り抜く方法をご紹介いたします。 ※今回の記事で使用している画像は下記サイトのものです。 water splash http://nihongo.istockphoto.com/stock-photo-13225547-water-splash.php Psd Soda Can Mock-Up Template http://www.pixeden.com/psd-mock-up-templates/psd-soda-can-mock-up-template Photoshopで“水し

こんにちは、エンジニアのひろゆきです。 僕は今年未経験からエンジニアに転職したのですが、サイトやシステムの制作未経験者にとってわかりにくかったのが「エンジニア」という職種の定義でした。 LIGでもエンジニアとして働いている人はたくさんいますが、「ネットワークエンジニア」「システムエンジニア」「データベースエンジニア」などその種類はさまざまであり、エンジニアの種類をすべて把握している人はそれほど多くないのではないかと思います。 また、職種がよくわからないため、事前にどんな資格を取得しておけば有利なのか、ということもよくわかりませんでした。 そこで今回は、僕のように未経験からエンジニアになる方はもちろん、エンジニアとして転職する方にも参考になるよう、主なエンジニアの職種と取得しておくと有利な資格をKENスクールさんの協力を得て、まとめてみました。就職や転職の際に役立つ資格ばかりですので、キャリ

こんにちは！　LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 非エンジニアの皆さんに朗報です。本日はWebサイトのクオリティチェックに関するすごいツールをたくさん紹介します（どーん）。 Web制作に関わるディレクターや担当者は、ソースコード自体は書かなくとも、イメージ通りのものができているかのどうかの確認はされていると思います。 しかし、パフォーマンス、SEO対策、ソースコードの整合性などの裏側までが「ちゃんとできているのか」というのはわかりにくいですよね。エンジニアに「いや、完璧ですけどこれ？」ってどや顔されたら頷くしかないと思います。 そこで今回は、知識がなくともその辺りのクオリティチェックが簡単にできるツールを紹介します！　これらを使えば、ざっくり「完璧」「まあまあ」「ヤバい」くらいの判断ができるので、作業者にツールの結果画面を見せて「なんとかして！」と伝

こんにちは。LIGのアートディレクターの長岡です。 前回の記事「誰でも簡単にできるGoogle Analyticsの検索キーワード分析入門」でオーガニック検索に関する分析方法を紹介させていただきましたが、今回はランディングページの分析方法について書いていきたいと思います。 ランディングページって？ ランディングページとは、ユーザーが一番最初に閲覧するページのことです。 大まかには以下のような形でのサイトへのランディングが考えられます。 検索エンジンからのランディング 広告からのランディング SNSからのランディング ブログ記事からのランディング ブラウザのお気に入りなどによるダイレクトでのランディング その他にもいろいろなランディング経路があるかと思いますが、「どういった経路からの流入が多いのか」「ランディング先からはどのページへ遷移しているのか」をきちんと分析することで、多くのことが分か

SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ こんにちは、じつかわです。ナイルという会社でSEOコンサルタントをやっています。 さて、いきなりですが、皆さんがSEOを勉強し始めたとき、一番最初に覚えたことはどんなことでしょうか。おそらく「titleに対策キーワードを入れる」ことではなかったでしょうか。 「title」「meta description（メタディスクリプション）」「h1」というあたりのHTMLタグは、SEOでは非常に重要な役割を果たします。 とくに「titleに対策キーワードが入っていなければ、SEOはほとんどできない」といっても過言ではないほど、検索エンジンの評価において主要HTMLタグにキーワードが含まれていることは重要です。 SEOに取り組んでいる人であれば「そんなの普通にやってるよ！」と言われ

こんにちは、デザイナーの白浜です。 最近写真のレタッチすることがちょくちょくありまして、その中で個人的に「これはすごい！」と思ったPhotoshopのハイパスフィルターを使った方法について、紹介していきたいと思います。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ ハイパスフィルターを使ったレタッチの手順 1. レイヤーを2枚複製する まずは元画像を2枚コピーします。レイヤー名は任意なのであとでわかりやすいように「ぼかし」と「ハイパス」と名前をつけています。 2. コピーしたレイヤーにフィルタをかける 複製したレイヤーにそれぞれフィル

こんにちは。LIGブログ編集部です。いつも「時間が足りない！」「忙しい」「寝たい……」と思っているWebデザイナーの皆さん、Photoshop作業の時間短縮をしていますか？ Photoshop作業の効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Webデザイナーさんならぜひ使ってほしい、Photoshop作業を効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、時短できる要素がないかぜひ確認してみてください。 1. ショートカットを使い倒そう 作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。 ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「Photoshopの効率化におすすめのシ

こんにちは、デザイナーのぺちこです。 ぼーっとしている間に妹が高校を卒業していました。さらに、実家に顔を出したら成人式の話をしていました。なんというか、何もかもが衝撃です。 さて。デザイナーならmacじゃないの？という声もよく耳にしますが、コーディング＆（IE）デバッグのことを考えると、Windowsの方が勝手が良いことも多いです。 結果的にデスクトップとノートでWindowsとmacの2つを持っている人も少なくはないのではありませんか。おかげでタイプミスの多さったら。 ということで、今回は制作に関わるWindowsユーザーのみなさまにオススメのフリーソフトをご紹介したいと思います。 Windowsユーザー必見！ 普段使いにも制作にも役立つ便利ツール5選 お手軽キャプチャソフト「LightShot」 Windows標準機能のスクリーンショットは少々使いにくいですよね。 「ちょっとした修正の