いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。 さてみなさん「Node.js」って知っていますか？ 僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。 ▼2020年最新版はこちら！ Node.jsとは 一言で言うとアツいJavaScriptです。 通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。 例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスし
他人の知識から学びとれ！Webディレクターに役立つ厳選スライド資料まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
勉強欲が強いディレクターの鮫島です。 普段みなさんは知識を得るためにどのような勉強をしていますか？？ 本を読んだり、セミナーに行ったり、Facebookのタイムラインに流れてくる技術系の記事を見たりすることが多いかと思います。 私も大体そうなのですが、最近それ以外にも勉強する方法を模索しています。 その中の1つとして、ちょこちょこ目に付くオンラインの「スライド資料」がとても分かりやすくて、ちょっとした合間に勉強できます。そこで、私が最近見た中でも、見やすくて勉強になったスライドをいくつかご紹介します。 ちなみに、オンラインのスライド資料サービスについては、過去にディレクターの勢古口が「より美しいプレゼン資料を共有しよう。オンラインプレゼンツール7選」でまとめていますので、ご興味あればこちらもご一読ください。 ディレクター向けのスライド資料まとめ IAシンキングによるモバイル再設計 内容 I
フロントエンド開発を裏から支えるデバッグアプリケーション4選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。4月1日からLIGで働いてます、ハカセです。今後フロントエンドの開発に関する情報を発信していきますので、よろしくお願いします。 さて、フロントエンド開発でのブラウザチェックって結構大変ですよね。こういう作業は重要なのですが、飽きやすいので、効率よく進めていきたいところです。 LIGでもブラウザチェックなどのデバッグの方法については定期的に議論がなされる永遠のテーマです。 そこで今回は、チェックやデバッグを助けてくれるツールから、Win/Mac共通で使えるものを厳選してご紹介します。 1. Edge Inspect http://html.adobe.com/edge/inspect/ Adobe社が提供しているアプリケーションで、Creative Cloudに入っています。 PCのブラウザとモバイル端末で同時にリアルタイムの確認ができたり、スクリーンショットを取ったりすること
ビジネスで活躍！フリーランスにオススメの無料クラウドサービスまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！千葉でフリーランスWebデザイナーとして活動しておりますライターの、のび太です。最近仕事でクラウドサービスを利用することがかなり増えてきました。 クラウドサービスとは？ 英語のCloudを直訳すると「雲」という意味ですね。 クラウドサービスとは「雲の上のような場所＝ネット上」にデータを置き、PC、スマホ、タブレットなどあらゆるデバイスで自由にアクセスできるサービスです。 基本的にPCで作ったデータは、そのPCからしかアクセス・編集できません。従来は、そのデータを他の場所で使いたいとき、USBメモリーにいれておいたり、スマホにコピーしたデータを入れておいたりしていたわけですが、クラウドサービスを利用すれば、その必要が一切なくなるわけです。これは助かりますよね！ ＜クラウドサービスの主な利点＞ ネット環境があれば、いつでもどこでもデータの閲覧・編集ができる 複数人で同じデ
IllustratorでWeb制作をするときに気をつけたい5つの設定 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
CCの魅力を感じつつもCS6製品で様子を見ている、月額支払いがちょっと怖い。そんな九州ライター村上です、みなさんこんにちは。 今人気のフラットデザインはIllustratorが得意とする部分なので、最近Illustratorを使ってWebサイトを作ろうという動きが増えてきました。Illustrator使いとしては非常に嬉しい事です。しかし、DTPを得意とするIllustratorでWebサイトを作る際には、確認しておかなくてはいけないWeb用のポイントがあります。 今回は、初心者向けのちょっとした用語の説明と共に、Web用コンテンツ作成時に気をつけるべきIllustratorの設定をご紹介していきます。 IllustratorでWeb作業をする時に気をつけたい5つの設定 単位は相対単位のピクセルにする カラーモードはRGBにする ピクセルプレビューで作業する 各パーツはアートボードをわけて
サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！ 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。 では早速行きましょう！ オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
データベースの基本構造とWordPressのテーブル設計に見るデータモデリング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライターの内藤です。普段は主にコーディングやサーバ管理などを担当しております。その前は小規模データベース技術者、兼C++プログラマでした。地味です。 聞いたことがある方も多いと思いますが、WordPressはMySQLというデータベースに依存しています。この記事も、MySQLに保存された文字や写真などのデータが様々な条件で取り出されて、みなさんにこうして見てもらえています。でも、実際にそれがどのように働いているのか、ご存知でしょうか。 データベースはWordPressをはじめ多くの分野で利用されているので、基本的な構造を理解しておくと、少なくともWordPressのインストールやカスタマイズで悩む機会は減るはずです。 そこで今回はWordPressのMySQLを題材に、データベース（正確には広く普及しているリレーショナルデータベース）と、データモデリング（後述）の基本について簡単にご紹介し
Photoshopで簡単にペンキで描いた風の文字を描く方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 今回は木の板にペンキで描いたようなテキストを表現するチュートリアルをご紹介します。 使用環境、素材について ソフトはAdobe Photoshop CCを使用しますが、バージョンがCS3以上であれば十分に制作可能です。 まずは素材を用意します。 以前「デザイナーが選ぶデザイナーのための無料写真素材サイト、厳選10個！」の記事でも紹介したCG Textureから以下の素材をダウンロードします。（ダウンロードにはユーザ登録が必要です） BrickMedievalBlocks0022(1600×1158) WoodPlanksClean0027(1600×1200) フォントは好みのものを用意しましょう。ペンキ風なので手書き感のあるものが合うと思います！ STEP1. 背景レイヤーの上に素材を配置する まず、1000×718pxの新規PSDを作ります。 先ほ
Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！ Web制作者として日々勉強中でありますライターの、のび太です。 先日「Webが学べる海外サイト10選」をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。 国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった「これはWeb屋なら絶対必須でしょ！ もはやお金取られてもいいレベルや！」って感じた10個をみなさんにシェアしたいと思います。 また、大変恐縮ながら、個人的にベスト3だと思った記事（特に有益だと思った記事）も一緒にご紹介させていただきます。 【こちらもおすすめ】 ☞ Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも
広報の仕事についてと中小企業にこそ広報担当が必要な3つの理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはみなさま、ライターのコマツです。 さっそくですが、あなたの会社には広報担当者が在籍していますか？ 大企業では当たり前のように存在する広報部や広報担当者ですが、中小企業ではその存在が確立されてないところがまだまだ多いようです。 かく言う私はかつて、前職である中小企業（ちょこっと有名な洋菓子店）に広報を新設し、自社製品の認知度を大きく高めた経験があり、広報担当がいない会社は多くのチャンスを逃していると感じています。 今回は、私が広報担当者として社内で実際におこなって手ごたえを感じた事例を交えつつ、企業に広報が必要な理由を3つにまとめてみます。 そもそも広報って何？どんなことをするの？ 本題に入る前に、「そもそも広報って何どんな仕事？」と思っていらっしゃる人が多いと思うので、そのあたりをご紹介しておきます。なんて言いながら、実のところ自分でも「広報の仕事はこれだー！」と断言することがで
ブルブル落ち着きのないエフェクト「CSShake」を使ってみた！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです。 はやちはよく周りの人から落ち着きがないとよく言われます そういえば子供の頃から親にも言われていました((((´ʘ‿ʘ｀)))) 今回は、はやちのようにブルブルふるえる落ち着きのないエフェクト「CSShake」をご紹介致します((((´ʘ‿ʘ｀)))) ブルブルする種類 ブルブルの動きは全部で9種類用意されています((( ˘ω˘)))☝ Basic Shake…基本のブルブル Slow Shake…ちょっと遅く大きくブルブル Little Shake…小さくブルブル Hard Shake…激しくブルブル Fixed Horizontal…横にブルブル Fixed Vertical…縦にブルブル Fixed Rotation…回るようにブルブル Opacity Shake…透明度が変わりながらチカチカブルブル Crazy Shake…縦横無尽にバタバタチカチカブルブル
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
Web制作者向け便利ツール・参考デザインなどLIGブログ記事まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！最近カナダから日本に戻ってまいりましたライター、のび太です。いや〜やっぱり日本はいいですね～。なんといっても牛丼が安くてウマい！！ さて、LIGではこれまでWeb制作者にとって役に立つ様々な記事が公開されましたが、かなり数も増えてきたので、今回はそれらを分野別にまとめてみました。 時間のない方も、ぜひ一旦ブックマークなどをしておいて、週末なんかに一気に読んでもらえたらいいと思ってます。この機会にWeb力向上を目指しましょう！ Web制作者に役立つ記事ジャンル別のまとめ Web制作者にとって便利ツールは欠かせませんよね〜。作業時間が何十、何百分の一にも短縮されることもあると思います。場面によって適切に使い分け、どんどん効率化を図っていきましょう。 ■Windowsユーザー必見！普段使い＆制作に役立つ便利ツール5選 https://liginc.co.jp/web/too
文字が動く！ MARQUEEを効果的に使ったウェブサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさん、こんにちは。菊池です。今年でインターネット歴15年になりました。 ずっと流行っては消えていくウェブサイトのトレンドを見てきたわけですが、今回は最近……どころか10年以上見ていない「MARQUEE」を使っているサイトをまとめてみました。 MARQUEEとは？ HTMLタグの一つ。このタグを指定すれば、ウェブサイト上で文章を右から左へとスクロールさせることができる。そのため、視点の位置を移動させずに読むことができて、とても便利でスタイリッシュ。かつモダーン。 しかし、悲しい哉、今ではほとんど使われていないロストテクノロジーの一種。 それではMARQUEEの世界を探訪してみましょう。 速読ウェブサービス https://hitode909.appspot.com/speed_reading/ 宮沢賢治の短編小説「ポラーノの広場」の冒頭が高速で流れてくるウェブサイト。何と今月公開されたば
最近お世話になったWeb制作に関するお役立ちツール＆プラグイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。春ですね。4月生まれなので春はなんだか気合が入ります。 さて、挨拶とは関係ありませんが、最近Web制作をする上で役に立ったツールやプラグインをご紹介したいと思います。 画像作成編 無料で半透過マルチアイコンやファビコン（favicon.ico）作成 http://ao-system.net/alphaicon/ アルファチャンネルを持った綺麗なマルチアイコンが一発で作れます。仕上がりが綺麗だったのでお気に入りです。favicon画像作成のお供に。 OGP画像シミュレータ | og:image Simulator http://ogimage.tsmallfield.com/ 画像をアップロードするだけでFacebookのタイムライン上にどのようにトリミングされて配置されるかを一発でシミュレートしてくれます。 「あっこのままだとロゴが欠ける…」とかぱっと見で
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
隠れた便利機能ベスト3
こんにちは。デザイナーのハルエです。 今回は、知っているのと知らないのとでは作業時間に圧倒的な差がついてしまうPhotoshopの効率化機能マイベスト3を紹介させていただきます！ 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ ※2014年3月7日に公開された記事を再編集したものです。 その1：Vanishing Pointでハメコミ合成 みなさん、“Vanishing Point（ヴァニシングポイント）”機能をご存じでしょうか？ 機能の存在は知っていても、使ったことのない方が多いかと思います。 このVanishing Point
ブックマークレット10選
こんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。 シニガン？な私は裏面（おそらくフィリピン語）を見てもさっぱり作り方がわかりません、クノールなのに… パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。 今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。 デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。 「ブックマークレットってなんだろう？」な方に説明をしておくと、 ブックマークレット 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選ん
模写して学ぼう！駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの藤田です。 「石の上にも3年」と言いますが、私のWebデザイナーとしてのキャリアもついに2年目が終わり、3年目を迎えようとしております。 日々学ぶ事が多く、とても3年程度で大成するような業種ではないですね（どの業種にも言えることだとは思いますが）。 そんな私がデザイナー1年生だった頃を振り返ると「手っ取り早くデザインが上達しないかなー」なんてよく考えておりました。 そこで今回は、私の経験から最も手っ取り早くデザインが上達する「トレース（模写）」の方法をご紹介いたします。 なぜトレースがデザインの上達につながるのか？ なぜトレースがデザインの上達につながるのか、自分なりに考えてみました。 「デザインは細部に宿る」と言われますが、その細部に気付く 「デザインの引き出しが増える」 「自分の悪い所が解る」←これが一番重要！ などなど、良いことがたくさんあります。 まずはカッ
海外のハイクオリティなフリー写真素材サイト11選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Webサイト制作時には、写真素材サイトが必須ですよね。クオリティの高いものを選べば、それだけでサイト全体の印象もぐっとよくなります。 本日は、Webサイト制作時に使える高クオリティな海外のフリー写真素材サイトを紹介します。 頑張って他の記事とかぶらないものを選出してみたつもりです。（かぶっていたらゴメンナサイ。） どれもオシャレなので、Webサイト制作時だけでなく、ダミー写真や写真を撮る際の参考などにもお使いください。 無料で商用利用可能のものを集めていますが、僕の翻訳能力が怪しいので、ライセンスはご自分でお確かめになってからお使いください。それでは、どうぞ。 ※編集部注：この記事は2014年9月に公開されたものを、最新情報を元に再構成・編集しています。 写真編 New Old Stock https://nos.twnsnd.co/ サイト名のとおり、クラシックな作品を揃えており、単純に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
