サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
arutega.jp
web制作の実務経験でしか知ることができない注意点を記事にしました。 こちらは有料にて販売いたします。 実務経験がないマークアップエンジニアが事故るのは自己責任なので、私の知ったことではありません。 学習不足な本人が悪い。 でも、それでは依頼する側が可哀想。 二度と発注はしたくないでしょう。 この記事ではマークアップエンジニアが、事故る前に知っておかないとまずいことをまとめています。 自分も最初は知らなかったことなので、下記の方は参考にしてもらいたいです。 対象の人 コーディングはわかるけど実務経験がない コーディングの実務のフローを知りたい方 副業で事故りたくない方 Progateをやったけど、次に何をすればいいかわからない このような方を対象に書いています。 逆に、下記のような方は対象外なのでそっとブラウザを閉じてください。 対象外の人 フロントエンドエンジニアとして、すでに企業で活躍
Webデザイナーの平尾誠です。 最近アップデートしたポートフォリオが評判が良くて驚いています。 本当にありがとうございます。 さて、僕は最近MENTAというサービスを使い、Webサイト制作初学者へ向けたメンターをしています。 カンタンにいうとマンツーマンで独学をサポートする感じです。 僕はメンターとしてサポートする前に、必ず不安を解消するためヒアリングを行っています。 ヒアリングしているといろんな人がいますが、共通して言えることがあります。 自分が今、どの高さの、どの山を登っていて、何合目を登っているのかわからないということです。 Lancersやcrowdworksで稼げるまでの基準が欲しい。 何を勉強すれば、次のステージにいけるのかがわからない 上位職のイメージがわかない そんな悩みを解決すべく、エンジニアのスキルアップシートを用意しました。 ちなみに僕はWeb系デザイナー兼エンジニア
Our creative team is focused on developing brand new EXPERIENCES. Whether it be games, entertainment, art, devices or services, our mission is to create that special EXPERIENCE and share with as many users around the world. こんな感じですね。 自分もポートフォリオで実装したいと思ったのでたくさん探しました。 マウスストーカーの作り方まとめ See the Pen Mouse Stoker by masayuki yamada (@yamada-evoworx) on CodePen. See the Pen Custom cursor with GSAP TweenMa
Webデザイナーの平尾誠です。 今日は汎用的なテキストアニメーションを集めました。 テキストの現れ方が魅力的だと印象はグッとよくなります。 また、引きつけたいものに目線を導くことも可能です。 ほとんどのものはJqueryを読み込めばつかえます。 気になるものがありましたら、Codepenで見てくださいね。 テキストアニメーション マウスオーバーで太くなる See the Pen Variable font – Animated over (weight) by Andros Guiradó (@Grooo) on CodePen. 神秘的に出る See the Pen Simple textillate client demo by Frida Nyvall (@fridanyvall) on CodePen. ブラーとともに See the Pen Transmission: Glowi
慣性スクロール系プラグインは沢山あるんですが、いつもページ下に変な余白が出来たりします。 とにかくうまくいった試しがない。 マウススクロールをスムーズに動かしたい 慣性がついた余韻があるスクロールがしたい って人にへ向けた記事です。 慣性スクロールって検索したら、だいたいがページ内リンクをスムーズにする”するするスクロール”系のプラグインがヒットします。 でも本当にしたいのはそうじゃないです！！ スクロールでページ全体にヌルッと余韻が残るアニメーションをつけたい！ そんなとき「jquery.easeScroll.js」なら簡単に出来ます！ マウススクロールに慣性をつけるjqueryプラグイン こちらが公式の配布元です。 easeScroll easeScroll.jsの使い方 jqueryとセットで使って下さいね。 <script src="//code.jquery.com/jquery
そんな悩みを抱えた方へ向けた記事です。 副業にランサーズやクラウドワークスを利用している方はとても多いですよね。 今やフリーランスや副業の登竜門のようなものです。 Webデザイナーを始めてから8年ほどたちますが、先月はじめてランサーズを通じて稼ぐことができました。 会社員をしながら副業だけで54万ほど稼げたんです。 その経験からランサーズ初心者の壁と攻略方法をお伝えします。 結論から言うと、とにかくたくさん提案することです。 仕事を受注できないのはあなたの実力が低いとかではなく、提案している数が少ないだけだったりします。 その理由と、効率よく提案する工夫をお伝えします。 また、稼ぐ方法は一つではありません。 たくさん提案することに疲れたらエージェントに仕事をとってきてもらいましょう。 自分本位のプライドを捨てよう たくさん提案できない一番の理由がこれ。 僕が最初にランサーズに登録したのは2
Webディレクターの仕事内容と必要なスキル Web制作のトレンドは流れがとても早いです。 でもディレクターに求められるスキルはいつの時代も変わりません。 プランニング 工数管理 見積作成 品質管理 クライアント・協力会社コントロール というかデザインとマークアップ以外の全部 このように、Webディレクターの仕事内容は多岐にわたります。 Webサイトの制作や更新に関するプランニングから始まり、コーディング・写真や素材の制作の進行。 そして、システム開発などサイト制作に必要なチームの編成、スケジュール管理、予算管理、クオリティ管理にくわえて外部の協力会社探しなどなど、サイトのローンチに至るまでのすべての行程を指揮管理します。 理解できましたね？？ 要するに、デザインとマークアップ以外の全部ですね。 多スギテワロタ 戦略的指揮官であり雑用のスペシャリスト 上記の通りWebディレクターはWeb制作
Webデザイナーの平尾誠です。シンプルなスライダーごときならわざわざプラグイン入れる方がめんどくさかったりする。 だから現場でサクッとコピペして使えるようにここにライブラリとしておいておきますので、みなさんもコピペして使ってください。 jqueryでsliderを自作するなら HTML [code]<code title="HTML"> <div class="slider"> <div class="slideSet"> <div class="slide01 slide">slide1</div> <div class="slide02 slide">slide2</div> <div class="slide03 slide">slide3</div> <div class="slide04 slide">slide4</div> <div class="slide05 slide"
WordPressをはじめてみたけど、操作を便利にしたい プラグインがありすぎて、どれがいいかわからない そんな方へ向けての記事です。 結論、プラグインはせいぜい入れても10個未満にしたい。 なぜなら、プラグインは入れれば入れるほど、読み込みが重たくなるし、管理がたいへんになるからです。 最悪の場合、プラグイン同士が干渉し合ってバグを起こすこともあります。 だから必要以上に入れてはいけませんよ。 ここで紹介した必須4 つはこのブログ”arutega”でも使用しています。 また、オリジナルテーマを作る製作者に便利なプラグインも合わせて紹介しますね。 選んだ必須プラグインの基準は以下の三点 SEOで有利 管理画面での機能を便利に 表示スピードをアップ
貯金が184円まで落ち込んだけど、必死になったら月に54万稼げたWebデザイナーの僕です。 みんなネットで副業してるらしいけどどんな方法で稼ぐの？ 副業で何を注意すればいい？ こんな疑問を持っている方に朗報です。 思いつくこと全部やったら稼げます。 ある夜、妻とお金のことを話し会いました。 『あれ、払えないよね？どうする？。。』 みたいになり、あわてて結婚式場の見積もりを、いまさら見直すという、なんともアホな夫婦がここにいます。 長い間、僕は勤めながら、Webデザインやコーディング案件を副業として受けています。 これまではスキルアップの延長線上で受けることの方が多く、全く副業をしない月もありました。 だけど、先月は初めて稼ぐことだけにコミットしたら、副業で月額50万以上稼げました。 経済的に追い込まれてから稼ぐために何をしたかを振り返るので、これから副業を始める会社員の参考になるはずです。
フロントエンドエンジニアの平尾誠です。 Webデザイナーやフロントエンドエンジニアにとって海外Webデザインアワードを獲るのは憧れであり、目標のうちの一つでしょう。 今回は秀逸なサイトを紹介する海外Webデザインアワードを紹介します。 私たちWebサイトを作る人たちはこの機関に本当に表彰されたいんですよ。 掲載されるだけで世界から一斉に注目を浴びることができますからね。表彰されたくてされたくてたまりません。 わかりやすいように、受賞の難しさごとに☆をつけています。重賞は☆☆☆です。 また、受賞した際にもらえる証明証も記していますので皆さんこぞってエントリーしましょう。 まだ知られていないマイナーな海外Webデザインアワード WEB GURU AWARD 受賞証明書：表彰状 http://www.webguruawards.com/ ロゴのデザインが。。。ねぇ。これ以上は黙る。 BECT C
今では世界のホームページの31％がWordpressを利用して作られています。この記事は以下の方が対象です。あなたに読んでほしい ホームページを自分で作りたいブログをはじめたいWordpressって聞いたことあるけど理解できない要するにホームページ制作超初心者です。Wordpressならプログラミングの知識がなくても、オリジナルのホームページを作ることができます。とはいえ、ある程度の予備知識と学習が必要です。簡単に必要最低限を書いていますが、専門用語は都度調べながら読むことをオススメします。その理由は、他のブログを読んだ... WordPressでダメなテーマ デザインだけで選ぶなら、Wordpressの管理画面から検索して、自分の好きな無料テーマを選べばいい。 だけど、落とし穴がある。 海外のWordpressテーマは当たり前だが、英語用。 僕の経験上、英語用の行高と行間に日本語をつかう
テンプレートタグ：固定ページに投稿記事一覧を表示する 使い道：固定ページを作った際に、archive.phpにあるような一覧ページを作成したい場合 トップページに記事一覧を表示する例です。 サムネイル、記事タイトル、リンクURLを取得しています。 WordPressのテンプレートたぐもバージョンによって追加されたりしますが、これを貼り付けて使用すればオッケー。 今回の場合は、記事のサムネイル画像が設定さてていなかった場合、noimage.gifを表示するようにしています。 記事数をコントロールする $args = array( 'posts_per_page' => 8 ); これは上のソースコードの最新の記事を8件表示させるという部分です。ちなみに値を”0″にすると全てが出ます。 特定の記事だけ表示する 特定のカテゴリやスラッグをつけたものだけを自由に選んで表示することもできます。 以下
アートディレクションってなんか横文字偉そうに聞こえます。 簡単に言うと”デザインで課題を解決できるように導く”と言うことです。 もっともっと誰でもわかるように言うと、今より良くするためにダメ出しすると言うこと。 ただの悪口とはちゃうで。 ディレクションとは 先日、twitterでこんな書き込みを見つけました。 名刺でけた pic.twitter.com/jG386AUKHL — 大河内 明日香 (@AsukaOkochi) 2018年3月19日 エンジニアの方が作ったオリジナルの名刺です。 正直に言うと”素人っぽいっ感じだな”って思いました。�（ごめんなさいね） ただtwitterとはいえ、話たこともない人のデザインに口出しをするのはさすがに躊躇しました。 だけど簡単にもっと良くなるのになって思ったんです。 だから、勇気を出して。と言うか我慢できずに言っちゃった。 おもて面のロゴをほんの少
フロントエンドの平尾誠です。 Webデザイナーやエンジニア、もしくはWeb界隈のマーケティングに興味ある人にとってとても有益なWebブログをまとめました。 まずは一気にどうぞ！ マーケティングを勉強したい人のseo系ブログ Find Job! Startup http://www.find-job.net/startup/ バイラルクラブ http://viral-community.com/ バズ部 https://bazubu.com/ manablog https://manablog.org/ 便利なチュートリアルやチップスがいっぱいのWebデザイン系ブログ サルワカ | サルでも分かる図解説明マガジン https://saruwakakun.com/ PhotoshopVIP http://photoshopvip.net/ YATのBLOG https://wp.yat-net
とっても便利なススクロール系Jsを発見しました。 しかもMITライセンスときたら、使わせてもらうしかない。 では手を合わせて。いただきます。 SCROLL MANAGER とりあえず見てもらえるとわかります。 アニメーションが小気味良くて気持ちいい。 できること 要素ごとに慣性スクロール パララックス効果 要素ごとに遅延イベント SCROLL MANAGERはプラグインというよりも、javascriptのアセットという感じでしょうか。 冒頭の説明書きには、”クラスを使って便利にスクロールイベントをコントロールできる”とあります。 では早速使ってみましょう。 SCROLL MANAGERをダウンロード 配布元のGithub 公式サンプルサイト コンパイルしないと何が何をしている状況だかわかりにくいので、gulpでコンパイルしましょう。 HTMLもpugとうい記法で書いているので普段使わない人
僕は今とあるメーカーの中でWebデザイナー・エンジニアとして働いています。 デザインやブランディングがうまくて、自社商品がヒットしたという経緯もあり、メーカーではありながら僕が所属するデザインチームの社内での地位は高いです。 僕はこれまで、Web制作会社でしか働いたことがありませんでした。 ですので僕も順応しながらWebデザインチームを率いていくにあたって、インハウスデザインチームがどのようにあるべきかをまとめました。 デザイン集団にも、一般企業の制作部に置き換えても言えることなので、ぜひ参考にしてください。 インハウスの優れたデザインチー�ムとは 目的意識の共有 意義と目的の共有はどんなチームにも必要で、与えたいインパクトを明確にします。 仕事をするチームメンバーのためのスローガンとして チームになにができるかを、組織の他の人たちに伝えるメッセージとして 必ず意義と目的はチーム内で共有す
どこに住んでいても働けるノマドワーカーになりたい平尾誠です。 ITスタートアップが盛んな福岡で活躍しているWeb制作・ホームページ制作会社を厳選してご紹介します。 近年言われていることに、IT企業が福岡でスタートアップするというのをよく聞きます。 東京に比べると、家賃などの初期費用が安いことがその理由にあげられます。 世界の住みやすい街ランキンキングの７位にも入っていて福岡の名前がやっと世界に知れ渡り始めたかもしれません。 市街地は栄えているけど、海も空港も近くて、車で少し行くと手付かずの大自然がある。 案外、東京のようなゴミゴミしたところを避けている人が、福岡にすでにたくさん住んでいるかもしれませんね。 外部参考記事 #FUKUOKA 福岡のクリエイティブなニュース YY http://yyyyyy.in/ ワイツーだと思います。 すでに有名ですかね。最初に思いついたのがYYさんでした。
『東京 ホームページ制作』とGoogleで検索すると、今やほとんどが記事広告を目的にしたページが表示されます。 そこでWeb制作16年目の私が、ハイクオリティな東京のWeb制作会社を厳選しました。 東京にはクリエイティブを得意とするWeb制作会社が集中しています。でもWeb制作会社によって得意分野が違っているので選び方を間違えると費用対効果を得ることができません。 とはいえ、目的に沿った制作会社を選ぶことは難しい。 そこでWebデザイン会社代表の私が、ホームページをフルリニューアルするとしたらお願いしたい会社を選びました。 この記事では東京の デザインや企画力が強いWeb制作会社 最新の技術をつかってクリエイティブな表現ができる web業界の中でも評判がいい webデザイン +α そんなweb制作会社を厳選しました。 Web制作会社によって得意分野が違っていたり、抱かれているイメージが実際
WordPressのテーマ変更と時期を同じくしてサーバーの移管をしました。 当ブログをロリポップからエックスサーバーに変更しました。おめでとうございます！！ 巷ではエックスサーバーは安定しているかつ、高速と言われています。 ですが、ロリポップとエックサーバーの両サーバーを比べて見たところ、さほどエックサーバーにしたメリットはありませんでした。 ページ表示スピードも互角です。むしろロリポップの方が速いです。 だから必ずしもエックスサーバーの方がいいというのは都市伝説でした。 ロリポップの表示スピードを見てみる 長年愛用しているロリポップ！レンタルサーバー 比べたプランは長年愛用しているロリポップの”スタンダードプラン” 月額 / ¥500です。ロリポップの中でも一番人気のもっともポピュラーなやつです。 Google Speed Insights表示スピード ロリポのモバイルは64pt ロリポ
世界のホームページの27%がWordpressになったそうです。 ここまでくるとWeb制作を仕事にしてなくても、管理画面の中をさわったことがある方は多いでしょう。 ローカル環境にWordPressをインストールすると、テンプレートのデザインの確認やプラグインの検証ができます。 この記事を参考にすればこんなことができます。 WordPressをローカル環境(パソコン上)でも動くようにするには、エンジニアであればMAMPやDockerといった、仮想サーバーを建てるアプリケーションを使うことが一般的です。 ですがWordpressだけすぐに作りたい初心者には敷居が高い。 聞いたことない言葉が多く、設定がめんどくさいし、手順が多い。 MAMPやDockerがわからない・めんどくさい方にとてもオススメします！ LOCAL by FlyweelはローカルにWordpress環境を構築できるアプリ そこ
やっとムスリム向け日本食レストラン”HALAL SAKURA”様のWebサイトを公開しました。 いやー感無量ですね！東京のクライアントを相手に大阪から初めてフルリモートで全ての工程を終えることができました。 おめでとうございます！ そして前編に引き続き、Webサイトの制作工程を余すことなくレポートします。 Adobe XDとSketchで飲食店のサイトを作る【前編】ではワイヤーフレームはAdobe XDで作り、デザインはSketchで作るWebサイトの制作フローを紹介しました。 後編の今回はデザインを形にしていくコーディングについて詳しく書いていこうと思います。 今回の実装はどれもJqueryを使えば汎用的に使えるギミックなので、マークアップ初心者でも簡単に取り込んでいくことができます。 喜んでもらうにはアニメーションも含めてデザインする アニメーションを使うことはリッチにカッコよく見せる
フロントエンドデザイナーの平尾誠です。 日暮里にあるイスラム系のムスリムの方のためのレストラン”HALAL SAKURA”のホームページ制作をさせていただくこととなりました。 そこでディレクション・デザイン・実装を僕一人で完結するこのプロジェクトを、前編と後編の二部作に分けて記事にします。 この記事はこんな人に向けて書いています 受託のWeb制作の進め方が知れます。 身につけたい技術 このプロジェクトを通して、僕が身につけたいスキルは主に二つです。 ・Adobe XDで何ができるかを知り、今後のフローに組み込んでいく ・初めてSketchを使ってデザインし、Photoshop脱却を計る デザインや実装をスムーズに行うためには、クライアントとのスムーズなコミュニケーションが不可欠です。そしてたくさんの差し戻し・変更を避けるためには、情報の共有がキモになります。そこでAdobeXdを使い、サイ
提案資料のテンプレートをXDで用意しました 内容はWebサイトのフルリニューアルを想定しています。 目次は下記の通りです 与件整理 目標達成に向けた考え方 ご提案内容 サイトマップ スケジュール 体制図 参考資料 最後の参考資料のページには空白のページになっていますので案件ごとに資料を貼り付けたりして使ってください。 Webのリニューアルでなくても、必要のないページは削除して汎用的に使えると思います。 まあ、とにかく好きに使ってください。 ダウンロードはこちらから 僕が実際に提案した資料の必要のない部分を削除して作りました。 空白や、余計なスペースがあるので、そこにあなたの提案を埋めて完成させてください。 このリンクからダウンロードして使い方を覚えて提案資料を作れるようになりましょう。 パワポより便利でお手軽 このブログでもXDの記事の人気は高いです。 あわせて読みたい Adobe XDで
僕が使い慣れている、一番簡単なパララックスのjqueryのプラグインを紹介します。 パララックスを使う理由 写真素材をもらってからの制作依頼はとても多いでしょう。 だから、できるだけ写真素材がいろんな角度から見えるように工夫したい→パララックスを使って奥行きを見せるに行き着きました。 パララックスを使ったプラグインはたくさんありますが、これ決定版です。 パララックスのプラグインは無数にあります。だけど古いものはレスポンシブに対応していないものがとても多いです。 だけどこのRELLAX.jsはレスポンシブのサイトでも、classを付与するだけで問題なく使用することができます。 RELLAX.jsの使い方
かなり強気なタイトルですが実際に最近の案件でSwiperというjavascriptのプラグインを使っております。 もう現場ではSwiper.js以外のJsは必要ないと思います。 Swiper.jsの特徴 Swiperの特徴は下記の通りです。 Jqueryを使っていない オプションがたくさんある Demoページのわかりやすさと親切さ 他の優秀なスライダーのプラグイン Slick Slickもレイアウトがたくさんあって評判がいいですよ。 bxSlider bxSliderです。これはかなり昔からあって、レスポンシブのサイトが出だした時に話題になりました。 レスポンシブに対応しているのは当時このスライダーだけだったんじゃないかな。 急に起こるレイアウト変更に対応できる よく現場で言われるsliderの使い方は 次に表示される画像を表示した、サムネイルスライダー 前後の画像が画面からはみ出て見えて
転職・フリーとして活躍したいWebデザイナーの方は、日夜ポートフォリオ作りに勤しんでるのではないでしょうか。 ポートフォリオは実績・実力がわかりやすい必須ツールです。 こんにちは、クリエイティブディレクターの平尾誠です。 かっこいい・可愛いサイトを集めたサイトはよくありますが、フリーランスや個人のポートフォリオは見つけにくい。 検索しても日本人に絞った、個人のポートフォリオサイトって出てこないんですよね。 そこで、デザイナーやエンジニア、アートディレクターの個人のポートフォリオを集めました。 参考にして面接官の脳みそをぶっ飛ばしましょう。 また、お知らせです。 弊社ARUTEGAでは、15年以上の業界経験を元にデザイナー＆エンジニアの転職をサポートする活動を始めました。 職務経歴書とポートフォリオの改善を超具体的に行い、企業とのミスマッチを減らすものです。ページの最後に詳細は記載があるので
めっちゃアニメーションの微調整がめんどくさいWebデザイナーの平尾誠です。 とはいえ、Web制作においてアニメーションはユーザビリティにおいて、今やなくてはならない存在です。 でも公開間近にアニメーションを追加しろ！！なんて言われることも弱小フロントエンドとしては言われたりするのです。とほほ。 だけど安心。こんなのを見つけました。もう何回か現場でも使用しています。 animistaがあれば簡単にcssアニメーションをコピペして使えます。 animistaの使い方 拡大や縮小、スウィングなどの18種類ものアニメーションがあらかじめ用意されています。 オプションで数値を変更してアニメーションを細かにカスタマイズすることができます。 オプションではアニメーションのスピードだけでなく、ディレイや回転回数など、細かな場所まで調整することが可能。 生成されたcssをコピペするだけで、アニメーションを作
大阪・東京を拠点にするWebサイト制作会社。企業サイトのデザイン制作・マーケティングを粘り強くサポートし高い集客力を実現します。デザインブランディング・オウンドメディアの作成、コンテンツSEO対策はお任せください。
次のページ
このページを最初にブックマークしてみませんか？
『株式会社ARUTEGA｜アルテガ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
