こんにちは。 6月から役職が変わりフロントエンドリーダーからCTOになりました、先生です。 もうAngular1.4にアップデートしましたか？　Angular1.4になりマテリアルデザインを意識したアニメーション関連の変更や実装がおこなわれました。その分Breaking Changesもあるのでアップデートには注意する必要があります。 今日はそんなAngularJS 1.4を使って、マテリアルデザイン風にページ遷移するアニメーションを作ってみたいと思います。 今回のデモ デモは下記リンクになります。 各メンバーをクリックするとスムーズにアニメーションして詳細ページに遷移します。まずは触ってみてください。 http://frontainer.com/ligblog-sample/angular-morphing-animation/#/ 必要なもの AngularJS1.4 – https:

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ

こんにちは、ソウルドアウト株式会社のなごです。 Web制作で収入を得たい・増やしたい人にとって、バナー制作は空いた時間でサクッとできるのでおすすめです。 昨今は、クラウドソーシングによってバナー制作を外注する企業が増えてきているので、そこまで高度な技術がなくとも、5,000円～50,000円のスポット収入が得られます。 今回は、バナー制作によって、簡単にお小遣い稼ぎをするために必要な知識をすべてまとめました。社会人や学生、主婦の方など、空いた時間にお小遣い稼ぎをしたい人にも、Webデザイナーとして独り立ちするために実績を積みたい人にもおすすめです。 「成果が出る」バナーを作るには？ バナー広告の制作には、デザインスキルだけでなくWebマーケティングやコピーライティングのスキルも重要です。とくに副業や就転職を見据えてプロレベルのスキルを身に着けたい……という方は、Webの知識を総合的に学べる

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル

人物紹介：ツベルクリン良平 メディア事業部に所属するディレクター。記事広告の企画・ディレクションを担当。 毎日毎日、仕事があまりにも忙しすぎてどこにも出かける暇がありません。 でも、今回思い切って海外に行くことにしました。 すぐに行ける！憧れの台湾 日本から飛行機で5時間ほどで到着。世界一の高層タワー、台北101はまぁ結構高いなと思いました。 台湾名物の夜市にやってきました。お店が開いているときだったら明るそうですけど、この日はなんか寂れた雰囲気でした。 お店の人たちが美味しそうなまかないを食べてました。なんで入れてくれないんだろう。 台北のラッシュはバイクばかりだと聞きますが、ここにもたくさん並んでました。 24時間やっているお店を発見。全体的に濃いめな味付けでしつこかったです。 この街並みと家、おばあちゃんの面影を感じました。 田舎風の、生まれ変わったら住みたいような雰囲気でした。 故

こんにちは！　のっちです♩ 最近チームで朝のラジオ体操を始めました！ 身体が伸びてめちゃめちゃ気持ち良いのですが、動くたびに全身バッキバキです。日々の運動不足を痛烈に感じます。 さて、3月にデザイナーからディレクターに転身した私ですが、まだまだ現場で手を動かすことも多いです。 先日ロゴを制作させていただく機会があり、いくつかのロゴを参考にしていたのですが、その中でも特にイラストと文字を上手く組み合わせて効果的に見せているロゴが気になったのでまとめてみました。 見たことある！なものも多いかと思いますが、素敵なものばかりなのでぜひチェックしてみてください。 素敵ロゴデザインまとめ 1. 貴和製作所（きわせいさくじょ） http://www.kiwaseisakujo.jp/shop/default.aspx 女の子なら一度は見たことがあるであろう有名な手芸屋さん。ツノの部分が文字になっています

こんにちは、デザイナーのぺちこです。 さて、去る2014年のクリスマス、LIGではSHIFTBRAINさんと合同でクリスマス企画を実施しました。私は企画にはそんなに直接関わっていないのですが、4名（＋お蔵入り1名）のサンタクロースさんの似顔絵イラストを描き、 特設サイト で使っていただきました。 似顔絵って難しいですよね。でも、Illustratorを日々お使いなら、案外カンタンに作ることができるんですよ。というのを本日はお伝えしにきました。 なんでIllustratorならカンタンなの？ 手描きと比べると、という前提が入るかもしれませんが、個人的には以下のような部分が作りやすさをサポートしてくれていると思います。 パーツごとにやり直しがきく ラインが歪んでも「スムーズツール」を使えば楽にキレイなラインに直せる パーツの位置変更が容易 本人との比較がしやすい 肌や髪色を決めやすい なかには

ツルっとしたラインを手彫っぽく加工する このままだとハンコとしてはツルっとしすぎなので、デザインカッターを使い、削りだしたような加工をしていきます。 「効果」→「パスの変形」→「ラフ」で線をガタガタにします。 プレビューで確認しながら調整してみてください。ポイントを「ギザギザ」にしたほうが、より削りだす感じをだせるかと思います。 こんな感じです。手掘り感、でたでしょうか？ かすれの加工をする スタンプ独特の風合いをだすために、インクがかすれたような加工をします。 素材からスプレーを吹き付けたようなオブジェクトを用意しました。 こちらを使って2通りのやり方でかすれを表現してみたいと思います。 パスファインダーを使う場合 スプレーが上になるようにオブジェクトをかさね、「パスファインダー」→「前面オブジェクトで型抜き」をします。 スプレーのオブジェクトで背面のオブジェクトが貫かれた複合シェイプが

💡高品質なロゴ制作会社を知りたい場合はこちらの記事から！ こんにちは、デザイナーの藤田です。 私は最近、日本語のロゴをひたすら眺めるのにはまっております。漢字とかな文字の組み合わせは、その他の言語のロゴには見られない個性があり、とても素敵ですよね。 というわけで今回の記事は、最近見つけた素敵な日本語のロゴをまとめてみました。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ ※ 2014年10月16日に公開した記事を再編集したものです。 日本語の素敵なロゴ 眺めていて素敵で、デザインの勉強にもなるようなロゴを集めています。 1.

こんにちは！ LIGの副社長のゴウです。 俺の部下に「そめひこ」って奴がいるんですが、いま俺は彼の自宅に来ています。 見てください。この殺風景な部屋。 シンプルですが、あまりにも殺風景な部屋ですね。 今回、「そめひこの家で撮影をしたいから使わせて」と許可を取った上で、この部屋を200万円ほどかけて勝手に改造してみようと思っています。 とりあえず15分ほどでめっちゃ部屋がスッキリしました。荷物なさ過ぎ。 さぁ、こんな殺風景な部屋とも今日でサヨナラ。いつも頑張って仕事をしてくれている可愛い部下を喜ばせたいと思います。 インテリアのプロにお願いしてみた さて、実は今回の撮影をするにあたり、インテリアのプロに協力を仰いでおりました。 それがこちらのショールームを構えるインテリアショップのリグナさんです。 ショールームが東京駅からタクシーでワンメーターの所にあるのですが、なんでしょうねこの空間。 ヤ

こんにちは、ヴォラーレという会社でSEOコンサルタントをやっているじつかわです。 SEOコンサルをする中でさまざまなWebディレクターさんと一緒に仕事をさせていただいてきたのですが、やはりみなさん、SEOの領域まで手を出したくても出せない、というのが実情のようです。SEOをきちんとおさえたサイト構築をできる方には数えるほどしか出会ったことがありません。 しかし、外部リンクによるSEOで成功するのが難しくなっているなか、SEOを成功させるためには内部SEOをどこまでできるか、サイト構築時にいかにSEOを組み込んでいけるか、というのが非常に重要になってきます（※）。 SEOは他の広告手段とは違って、サイトそのものを検索エンジンに評価してもらうという取り組みですから、どのような企画・設計でサイトを構築するか / その際にちゃんとSEOを押さえられているか、によって大きな差がつきます。すなわち、S

こんにちは。メディア事業部のまゆこです。 私は普段会社で請求書の処理や発行を担当しているのですが、確認しなければいけない項目が多くてけっこう面倒くさいんですよね。私のようなバックオフィス担当はもちろん、フリーランスの方にとっても請求書作成ってかなり大変な作業になっています。 そんな背景もあってか、最近では「オンラインクラウド請求書作成ツール」がブームです。無料のものでもテンプレート豊富、クラウドなのでいつでもどこでも作成可能、とフリーランスの人にもうれしいツールです。 そこで本日は、請求書の処理などの対応に追われるバックオフィス担当者なら必ずチェックしておきたい「オンラインクラウド請求書作成ツール」を紹介させていただきます。 どれも便利ですので、ぜひ参考にしてみてください。 バックオフィスの心強い味方！オンラインクラウド請求書作成ツール9選 請求管理ロボ https://www.robot

こんにちは、LIGブログ編集部です。こちらはWebライティングに関する全10回のシリーズ記事です。 さて、良い記事を書くには、ひらめきや芸術性といった右脳的な発想が必要だと思われがちですが、思考や論理といった左脳的な発想だって必要です。 具体的には、より多くの人に記事を読んでもらうために、検索エンジンのアルゴリズムだけでなく、人の心や行動のメカニズムも解明したいところです。 そこで今回注目したいのが、コピーライティングやセールスライティングの分野では当たり前のように取り入れられている「心理学」です。 「心」の様々な働きと、それに基づく行動を、統計学的手法を用いて科学的に解明する学問である心理学。その中から、思わず読みたくなる記事の作り方に応用できそうな効果をまとめてみました。 ▼目次 ハロー効果 カクテルパーティー効果 ザイアンス効果（単純接触効果） 記事タイトルを作るうえで参考にしたい3

こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは

はじめまして。ライターのコーイチです。 私は、現在フリーランスとして活動していますが、LIGブログの「自社サイトをメディア化し、1年で100万PVにして分かった失敗と成功のまとめ。」を読んだことがきっかけとなり、今さらながら「個人ブログ」を始めてみました。 企業サイトの運営をテーマとする記事ですが、「個人ブログ」を運営する際にも役に立つ「6つのテーマ（5W1H）」に気づかせてくれます。 新たな一年におきまして「個人ブログを始めてみよう！」とお考えの方、こちらの記事を参考にしながら「個人ブログ」というメディアを一緒に見つめなおしてみませんか。フリーランスという私の立場からの視点も踏まえつつ、考察してみようと思います。 個人ブログを始めるときに改めて考えておきたい6つのテーマ 目次 だれが書くのか どうして書くのか いつ書くのか どこで書くのか なにを書くのか どのように書くのか まとめ 1.

こんにちは！！　メディア事業部のまさしです。 昨今、ウェブサイトをはじめとするウェブサービスやアプリなどは、作っておしまいではなく、作ってから運用し改修を続けて成長させていくことを前提とするようになりました。 その際に重要な役割となる管理画面ですが、管理画面って作るときに何のデータを出していいのか、どうデザインしたらいいのか迷いますよね。結果、あらゆる機能とあらゆるデータを盛り込んだ管理画面になってしまいがちです。 今回は、そんな悩みを解消できるように、目的に合っている使い勝手の良い管理画面をつくるための6つのルールをご紹介いたします。 ウェブサービスの管理画面をつくる上で守るべき6つのルール ルール1：ターゲットは1つに絞るべし！ 最も効果的な管理画面とは、単一のユーザーをターゲットとして、その目的をもとに固有のデータを表示しているものです。 複数のユーザーをターゲットとしてしまうと、い

こんにちは。最近、犬を飼ったtetsuです。 今回は、自分自身がWebプログラマーになるときにおこなった勉強方法（主にPHP）について大公開します。 まずは環境作り Webプログラマーにとって、まずは環境（サーバ）がないとプログラムを勉強できません。有料のサービスでサーバを用意したり、自分でサーバを作ったりとさまざまな方法がありますが、今は無料で環境を提供してくれるサービスが充実しています。 例えば ＠PAGES： http://atpages.jp/ xdomain： http://www.xdomain.ne.jp/ など、探すと結構出てきます。 無料のため、一部機能に制限があることもありしますが、プログラムが書けるようになってから有料のサーバを用意するのでも遅くはありません。 とにかくコードを書いてみる サーバの用意が出できたらまずはコードを書いてみましょう。 適当なファイルを作りま

どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae

こんにちは。たまです。 最近canvasを使用したサイトをちらほら見かけますね。サイトのコンセプトに合えば是非とも取り入れたい表現です。 今回は有機的な動きをcanvas+javascriptで展開しているサイトをまとめてみました。 インスピレーションが湧いてくるな〜。では行ってみよう！ My Life in 20 Years https://www.mylifein20years.com/ ※現在はサービスを終了しています。 facebookと同期してみてください。他のユーザーとの関係を繋ぐラインや読み込み時のローディング等、所々canvasが使用されています LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic https://panasonic.jp/shaver/lamdash/dna/index.html DNAがcanvasによって表現され、3Dの

こんにちは。デザイナーのはるえです。 レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。 過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。 ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増