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

こんにちは。 寒かろうが、風が冷たかろうがフットサルを行う時はシャツにハーフパンツ。野上です。 日常生活、どのような面でwebサービスを利用していますか？オンラインの時代が進化し続ける中で、現代には日常生活を向上させてくれる便利なWebサービスが多々あります。今回はその中でも、これは使えそう！と思えるWebサービスを10選まとめてみました！ 日常生活に便利なWebサービス10選 ファッションコーディネート WEAR http://wear.jp/ 特徴 人気ファッション通販サイト、ZOZOTOWNを運営するスタートトゥディが開発。 ショップ店員や、ユーザーが投稿したファッションスタイルを観覧することができる。 持っている服をクローゼット登録することで、管理することができる。 日々のコーディネートの参考にしよう！ 服買ったけど、これどうやって着こなそう…。ショップ店員みたいにうまく着こなした

こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 今まではデザイナーという肩書きだったのですが、最近会社の偉い人たちが 「フロントエンドエンジニアがほしいなあー。（チラッ）」 「そうだねー。ほしいねー。誰かやってくれないかなー（チラッ）」 という会話を僕の聞こえるところでよくするので、空気を読んでジョブ・チェンジした次第であります。 さて、今年も残すところあとわずかということで、今年僕が読んでタメになったWEB系の技術書やら指南書やらをご紹介いたします。WEB系の仕事をされている方、今後する予定のある方はぜひ参考にしてみてください。 もくじ 1.Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ 2.スマートフォンサイトデザインブック 仕事で絶対に使うプロのテクニック 3.レスポンシブWebデザインテクニックブック プロが教えるマルチ

こんにちは、メディア事業部のゆうせいです。 ブログのアイキャッチにお困りではありませんか？と言いますのも、自分が非常に苦労しているわけです。フォトショやイラレをサクッと使えればよいのですが、私のMacにはインストールされていませんし、今後もその予定はありません。だったら、どうする？他の方法を考えるしか無いでしょ！というわけで、今回は簡単にアイキャッチ画像を作成できるiPhoneアプリ、「Phoster」のご紹介です。もちろん今回のアイキャッチも、「Phoster」で作りましたよ！ Phoster カテゴリ: 写真／ビデオ 価格: ￥200 「Phoster」の使い方 起動画面です。「Create new」をタップして新規作成します。 作成する画像タイプを選択します。今回は「LANDSCAPE PACK」を選びました。 次にテンプレートを選択します。背景に画像を読み込んだり、背景色を変更した

こんにちは、ぺちこです。 先日水族館に行ったら「ペンギン12種模型セット」なるものをショップで発見し、危うく買うところでした。 Suicaペンギンのモデルはおそらくアデリーペンギンですが、私が愛してやまないのはジェンツーペンギンです。どうでもいいですね。（興味をもった人はみんな友達） さて、以前にデザイナーのせいとくんが Sassの導入方法と Sassの基本テクニックについてまとめてくれていましたが、今回はそれらを踏まえて、コーディングに役立つextend＆mixin集を作ってみました！ 日々ちょこちょこと作っては使いまわして・・を繰り返しており、あると便利なものは先にまとめておけば楽ではないかと、やっと気付きました。 サンプルで作ったhtmlとscssファイルを一式ダウンロードできるようにしていますので、そのまま使っても良し、各自（各社）毎のコーディングルールに合せて改良しても良し、要ら

どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされた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

こんにちわ段田です。 実は12月2日にKDDI ウェブコミュニケーションズさんのセミナールームで開催されたWordBench東京でLT（PCエンジンLT）（ライトニング トーク）をしてきました。 LTの内容に関しましてはWordBenchサイトで動画公開されているので、ご、ご確認下さい。 そもそもWordBenchとは？ WordPress情報の発信とユーザー交流の場です。 WordPressに興味がある方ならどなたでも参加が可能。地域単位でグループを作り、各地で勉強会懇親会等を開催しています。 WordBench東京 今回のプレゼンのテーマは「プラグイン」 今回、私とCTOのづやさんの2人でLTをさせて頂きました。与えられたテーマは「プラグイン」。2人とも人前で喋ることがほとんどないのでひたすら緊張…。（社長や副社長はこういうの得意なんでしょうね・・・）。 どうやればよいかわからない状況

こんにちは。デザイナーの白浜です。 人が見て美しいとデザインとされる黄金比や白銀比。なんとなく知っているものの、作り方や使い方がよくわからないという人もいますよね。 今回は黄金比や白銀比の考え方についてわかりやすく解説するとともに、Webデザインのレイアウトや画像制作に黄金比や白銀比を取り入れる方法・お役立ちツールをご紹介します。 良かったら参考にしてみてください。 （編集部注：2013年12月16日に公開された記事を再編集したものです。） 黄金比・白銀比って？ 黄金比・白銀比は、古くからある人が見て美しいと言われる調和的な比率のこと。デザインに黄金比や白銀比を使用することで、言葉で言い表せない芸術的な美しさを加えることができます。 まずは黄金比・白銀比がどういうものなのか、基本の考え方についてみていきましょう。 黄金比の比率と作り方 コトバンクによると、黄金比(Golden ratio)

※「世界一即戦力な男」ウェブドラマは現在特設サイトにて公開中です。 こんにちは。インターン生の菊池です。突然ですが、僕が公開したウェブサイト「世界一即戦力な男」がウェブドラマ化されます。 「世界一即戦力な男」とは？ http://www.sokusenryoku.me/ 2013年2月に公開された逆求人ウェブサイト。動画や壁紙を用いて就職先を求めた。3月末に株式会社LIGに内定。 このウェブサイトを作成し、LIGから内定を得るまでをドラマ化しています（ネタバレ注意）。 2014年の1月下旬から、5分〜10分の長さで週1回配信（全10回）。脚本、監督、制作スタッフどれもプロフェッショナルな人たちで、LIGのメンバーもストーリーラインの制作に協力しました。 そこで今回はドラマにも出演している株式会社LIGの最高技術責任者・高遠和也（通称・づや）とドラマ化について対談したいと思います。 年も押し

皆様、こんにちは。メディア事業部のまゆです。 最近はパワポなどを使って資料を作成することが少し増えてきました。外部の方の資料を見せていただくと、「こんな資料を作れてしまうのか……」と思うときが結構あります。 まだまだ勉強中の身ですが「こういうプレゼンができたら楽しそうだな」、「こういう資料を作ってみたい」と思ったプレゼンツールを何個かピックアップしてみました。 では、ご紹介したいと思います。 これは使いたい！プレゼンツール Zoho Docs https://www.zoho.com/docs/show.html オンライン上でプレゼンテーション資料を作成・公開できる完全無料サービス。 PC内にデータを保存していなくても、インターネットさえつながれば、いつでもどこでも利用することができます。作成した資料は.ppt/.pdf形式でエクスポートが可能。.ppt形式のファイルやGoogleドキュ

こんにちは。デザイナーのはるえです。 みなさんフリーマーケットって行かれたりしますか？ フリーマーケットは主に公園や広場、競馬場などで行われ、個人が使わなくなった洋服や生活用品をお手頃価格で買い取ることができるので、売り手も買い手もとっても幸せになれるのが魅力の一つです。 私も学生の頃はフリーマーケットが開催されていると必ず足を運んで何かしら買っていました。お小遣い稼ぎのために何度も出店して値切り上手の関西のおばちゃんとやり合ったりもしたので、コミュニケーション能力が少しは鍛えられたんじゃないかなと思います。 あのわいわいとした会場の雰囲気が私は大好きなんですが、今じゃ足を運ばなくてもパソコンやスマホやで簡単にフリマに参加できてしまうサービスが続々と出てきていますね。正直言って、、かなり便利です。さくっと売れてさくっと買えちゃう。 今回は、その中でも注目度の高いオンラインフリマサービス・ス

こんにちは。たまです。 最近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の

おばんです。ディレクターの鮫島です。 皆様、PinterestというWEBサービスをご存知でしょうか？ 今更！？と思うかと思うかもしれませんが、今だからこそPinterestがアツいんです。 とは？ “インターネット上で見つけた気に入った写真や動画を、Pinterest内の自分のページに任意で作った「ボード」に登録し、他のユーザーと共有することができるサービス” サイトはこちらPinterest 2年くらい前に海外で爆発的に広がり、日本でも話題になったと思いきや、日本人のニーズに合わずちょっぴり下火になってしまいました。ですが、先日ついに日本語化したというニュースが流れており、久しぶりに眠っていたPinterestアカウントを見てみたら、UIも以前より向上していてユーザー数が爆発的に増えているじゃありませんか。 これは今から押さえておかないと流行に乗り遅れると思ったので、Pinterest

こんにちは、もりたです。 先日IE10の奇妙な動作に振り回され、バグを起こすきっかけは電話番号だったという不思議なことが起こりました。 同じような現象で悩んだときにぜひ参考にしてください。 問題の概要 業務で制作したサイトをWin7/IE10で見ると、スクロール・リンク・テキスト選択など操作が一切効かず、フリーズ状態になった。 あるいは開いたページが真っ黒になる。（リロードすると表示されるがフリーズする） ブラウザ自体はフリーズせず、他のタブを選択することは可能。他のタブで開いてるサイトは普通に操作できる。 ドキュメントモードをIE7標準にすると操作できるようになる。 ドキュメントモードをIE7標準にすると電話番号が消える。 同じサイトを見ても、再現されるパソコンとされないパソコンがある。環境はどれもWin7/IE10。 再現されるパソコンでは、ベタHTMLとWPに組み込んだ状態どちらでも

（編集部注：2013年12月4日に公開された記事を再編集したものです。 ※無料で商用利用可のところばかりですが、中にはアイコン1個1個でライセンスが違うものやコピーライト記載が必要なものもあるので、ご使用の際には随時ご確認ください。） こんにちは。デザイナーの白浜です。 フラットデザインが流行りなこともあり？最近何かとピクトグラムアイコンを探す機会が増えました。（余裕があれば自作モノも増やしたいところですが！） でも、いつも同じところだとマンネリになりがち……。 他のデザイナーさんはみんなどこみてるんだろう？？とアンケートをとってみたところ……今まで知らなかったところが結構出てきました！ メモがてら、まとめてみたいと思います。 【こちらもおすすめ】 ☞ 質高すぎ！ベクター素材をフリーでダウンロードできるサイトまとめ LIGデザイナーが厳選！使えるフリーのピクトグラムまとめ Endless

こんにちわ。野田です。 アニメーション、トランディションを使ったWebサイトが多くなってきましたね。 flashは減ってきていますが、HTML5が標準化され、Javascriptやcanvas、videoを使用したコンテンツ制作が増加し、ブラウザに関しましても、少しづつですが最新の技術に対応するようになりました。 アニメーションやトランディションをつけることで、Webでしか表現できないデザインや、使い方さえ間違いなければユーザビリティ強化への強い味方になります。 また、訪れるユーザーに対して、ブランドイメージ、雰囲気を伝える手法として、制作者の皆様は、様々なことを考えて制作していますね。 そういったことを考えながらサイトを訪れると、とても感情移入してしまい、涙腺をやられがちです。 今回は、私が涙腺をやられそうになったサイトをご紹介します。 どうぞ、うっとりしてください。 世界観にうっとりし

お疲れさまです、ももこです。 先日発売されたGE2のプレイ時間を確保する為に、作業の時短は重要な任務です。 今回はSassでアイコンフォントを手軽に使える方法をご紹介します！ アイコンフォントを使ってみたいけど導入方法が難しそう…という方にオススメです。 アイコンフォントの用意をする まずはアイコンフォントを用意します。 過去記事にアイコンフォントの紹介がありますので、宜しければご参考ください。 「Retinaでもボケない「シンボルアイコン」を使いこなそう！」 「無料で出来る！オリジナルアイコンフォントを作ってみよう」 今回は「Fontello」から可愛いアイコンフォントをダウンロードしました。 cssフォルダと同階層に「fonts」フォルダを作り、その中にフォントデータを入れてください。 アイコンフォントの読み込み 早速Sassにフォントを読み込ませます。 LIGブログでたびたび登場する

皆様こんにちわ。メディア事業部のまゆです。 センスが抜群の方に贈るプレゼントって見つけるのが大変です…。自分にはセンスがないので「なにを送ればいいのか…」と結構迷ってしまいます。外に探しに行くのもいいですが、1日かけて見つからなかった時の絶望感は凄まじいですよね。 そんな私と同じ思いをしている方に「このサイトをチェックしておけば、とりあえず間違いはない」セレクトショップのサイトをご紹介したいと思います。 探せ！全てはきっとここにあるよ。 MoMA http://www.momastore.jp/ 私が絶対的な信頼を置いているMoMA。世界中から集めた家具、雑貨、デスクワークグッズなど種類が豊富です。また、「引き出物」のコーナーでは、様々なシーンに合わせた素晴らしいグッズが揃っているのでとても便利。商品からの検索はもちろん、デザイナーからも検索ができるので自分の好きなグッズも見つかると思いま

こんにちは、Web制作ディレクターのあゆみです。 自分が撮影した素材だけで動画をつくると、なんとなく味気なかったり物足りなかったりしますよね。 そんなときに使えるのが、動画編集用の素材。元素材に重ねたり、間に挟み込むことで尺を稼いだりすることで、少し手の込んでいる動画に見せることができます。短時間でなんとかしたいときは、かなり助かると思います。 というわけで動画編集に使える無料の素材サイト10個をご紹介します！ よろしければ参考にしてみてください！