サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
blog.cntlog.net
脱WordPressを本格化しようと思っているのですが、なんだかんだでWordPressは便利なので、使いたいと思うときはしばしばあります。 特にブログやカテゴリー、タグなどが必要なサイトの場合はWordPressで実装すると楽なときが結構あります。 しかし、そのためにnuxt.jsをやめて、phpで動くサーバーを用意してWordPressに切り替えるのはナンセンスだと思っています。 どうすれば良いかというとWordPressを立てたときに使えるREST APIをNuxt.js側で呼び出してそれを表示するようにします。 WordPressのREST API を扱うには REST API とはRESTと呼ばれる設計原則に従って作られたものです。 外部から読み出し、利用するためのプログラムで呼び出し規約(API)の種類の一つです。 WordPressでもバージョン4.7以降をインストールすると
Webデザイナーで活動しているとポートフォリオを求められる機会は結構ありますよね。 転職やふとしたお仕事の依頼など様々です。 私がポートフォリオを作る時考えている事を紹介します。 何を作るかよりなぜ作るかを考える Webデザイナのポートフォリオというとどんなイメージがありますか？ 人のポートフォリオを見ると何かカッコイイ作品がある、その人が作ってきた過去の成長が見える、得意不得意が見えるなど様々な気づきがあります。 でも少し思い返してほしいのですが、他人のポートフォリオを見ている時あなたは作り手がどんな人というのを見ていますか？ 同業者目線で作品だけ見ていませんか？ まとめる事に意識が向きすぎていて、「誰が見るか」という想像が欠如してしまうともったいないです。 ポートフォリオと言うのは、誰かをマウンティングするためのものでもないですし作品の展示会でもありません。 ポートフォリオをどう活用し
何かを学ぶというと人に習うか、本で学ぶ事がわりと多かったのですが、最近は動画で学ぶ機会も増えました。 私はUdemy（ユーデミー）という動画学習サービスを利用しています。 今回は一年間ほど、使った感想とUdemyの紹介をしていきます。 世界最大級のオンライン学習サイトUdemy [dfads params=’groups=165&limit=1′] Udemyとは Udemyは2009年にアメリカで設立されたオンライン動画学習のプラットフォームサイトです。 運営は進研ゼミなどで有名なベネッセが行っています。 以前は海外向けの動画が多かったのですが、最近は日本人も学習動画を投稿するひとが増えています。 以前は5,6万のコースが多かったのですが、最近は価格が全体的に下がっている上、頻繁セールを行い安価で品質の高い教材をゲットできます。 Udemyで出来ること udemyは会員制のサイトでアカウ
最近Webデザイナーになりたいと言う方の相談をよく受けます。 私もかれこれIT業界に10年以上いてまして、未経験で参入した人、できなかった人数多く見てきました。 Webデザイナーを目指す人が不安や悩みを解決できればと思います。 私について 今はWebデザイナかれこれ5年ほど続けています。 前職はFlashゲームを作ったり、ドッターをしていました。 同じデザインの仕事でもWebデザインは求められるスキルが異なるのでその辺は独学で勉強してきました。 詳しい経歴はプロフィールに記載していますので、興味のあるかたはそちらを御覧ください。 プロフィール 今ではコーディングが得意なWebデザイナで制作前の企画と制作後の改善を得意としています。 勉強会との出会い Webデザイナになった頃から勉強会に出るようにしていました。 当時自分も独学でWebデザイナになったので不安が多く、外部の人に触れて学んできま
「一般データ保護規則（GDPR）のお知らせがGoogleからメールがあったのをきっかけに、色んなところで、「Googleアナリティクス」のデータが削除される懸念の記事やツイートを見かけました。 私も「ああ、危ないな」と思って設定をいつか変えなきゃと思っていたのですが、運良く博識な友人達のこの件の討論を見かけて、削除しない設定にしちゃ駄目だなという気持ちになりました。 私が何を誤解していて、なぜ削除期間の設定を変えなかったのかをメモしておきます。 認識していなかったデメリット この分野では素人なので恐縮ですが、「個人情報のデータを持っている（EEA域外に移転した場合）と自分が罰せられる可能性がある」という事です。 Googleを始めとした、各企業が対策に乗り出した一般データ保護規則（GDPR）は私もよく分かっていないのですが、こちらが簡潔に書いてあって理解がしやすかったです。 EU 一般デー
最近自分でアプリを作って公開しました。（褒めてください！） ホウビンゴ まじめに3日くらいで作りました。 以前にも一度アプリを出したことはあったのですが、ちょっとコードを変えただけのパッケージものだったのでアプリ作ったとは言いづらかったのですが、今回はちゃんとコードを0から書いて自分でアプリを作りました。 作った理由というかきっかけは友人がアプリ開発の書籍を最近出したからです。 Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉 私はこの書籍のメインユーザーの想定に近いということでこの本のレビューに少し参加しています。 レビューした時に「あっ、これ私アプリ作れるわ」みたいな気持ちになったので、年末の連休を利用してアプリを作りました。 この記事では、この本を通じて約3日でアプリを公開した一連の流れを紹介します。 Ionicとは まずはじめにIonicの事を紹
勉強会の懇親会で人と話してみると、「独学でWEB勉強中です！」「WEBデザイナーなりたてです」と答えてくれる人がいるのだけど、そういう人ほど自分のブログやWEBサイトを持ってなくて残念だなーと思ったりしてます。 自分のサイトを持つとメリットは色々あると思っているので私なりにやっていてブログやっててよかったなと思ってるので、ブログやったほうが良いのかなと思ってる人の背中の後押しになればーいいなぁと思って書きます。 ブログを始めたきっかけ 私がブログをやろうとしたきっかけはWEBデザイナーになるために勉強中のものをまとめる場所が欲しかったという単純なものになります。 初めた当時はメリットなどをあまり考えていませんでした…。 しいていえばWordPressを使えるようになりたいなと思っていたのでその練習場所にできればくらいに考えていました。 技術の向上 WEBデザイナがブログをもつ場合はたいてい
先日、PTA広報になったらAdobeは使うな」という助言という記事（モーメント）を見て、 「あっ、これはあいつの出番や」と思ったので誰でも、簡単かつ無料から使えるツールをご紹介します。 課題解決のためのツール 問題となっているのが、デザイン系のママさんがAdobeのソフトを使うと翌年以降もAdobeに依存することで担当する人に制限を設けてしまうということです。 それを避けるためには、スキルやPC環境に依存せずにいることかと思います。 一般的なツールですと、印刷用やWeb用など目的に応じて多岐の選択をすることになり、覚えることが増えてしまい大変ですね。 そこで Canva(キャンバ)の出番です。 Canva(キャンバ) Canvaは、2017年5月には日本語版がリリースされました。 運営はKDDIウェブコミュニケーションさんが行っています。（KDDIさんとKDDIウェブコミュニケーションさん
個人的に制作してるサイトで複数条件を設定して検索したかったのですが、調べてみるといい感じのプラグインがあったので紹介します。 Search & Filterの紹介 Search & Filterは複数条件の検索フォームを作れるプラグインです。 Search & Filter 管理画面で設定するようなものではなく、既存の設定を組み合わせてショートコードで設置するようなタイプです。 参考コード [searchandfilter taxonomies="surch,category,post_tag"] こんな感じで検索対象をショートコードで選べます。 他にも、ラベルの名称を自由に選べたり、フォームのタイプをチェックボックスやラジオボタンにすることも可能です。 [searchandfilter taxonomies="surch,category,post_tag" types=",checkb
本記事はSketch Advent Calendar 2017の11日目の記事です。 去年からSketchに恋をしてデザインツールはSketch一択でずっと使っています。 一部の人には親をadobeに殺されたんじゃないかとか言われていますが、そんなことはなくただただSketchが好きなだけです。 Sketchが好きな理由は以前記事にまとめていますので、Sketchって何が良いの？って知りたい方はこちらをご覧ください。 現役WebデザイナーがデザインツールをSketch一択にした理由 今年もSketchは色々と僕らが望むUpdateをしてくれました。 それはSketch本体だけではなく、別のサービス・プラグインが公開されて機能実装されたものあります。 Sketchの魅力がプラグインが誰でも作れる（販売できる）点と、外部サービスの連携にあります。 本記事では、2017年のSketchの魅力的な
先日、WordPress用のこのブログ用にテーマを作ったのですがその時、開発環境も更新してみました。 これまでSCSSくらいしか使っていなかったのですが、最近はgulpも少しずつ使えるようになってきたのでそのあたりの更新です。 githubには上げていて、リポジトリはこちらです。 gulpの構成 gulpではSCSSのコンパイル、画像・JSの圧縮、ブラウザシンク、スタイルガイドの作成を行っています。 config(設定ファイル） [javascript] //////////// // config /////////// var themeName = ‘theme-name’; //開発用ディレクトリ var develop = { ‘root’: ‘wp-content/themes/’+themeName+’/assets/’ } //コンパイル先 var release = {
Twitterでコミケで爆死している「岩本町芸能社」というコンテンツ見ました。 コンテンツの見栄えからすると、そんなに悪くなさそうなコンテンツなのに、準備不足と、運営会社とユーザーのコミュニケーションが取れてないのが原因で大失敗したようです。 人の失敗を笑うだけなら、次に繋がらないので、自分ならどうするかなというのを考えてみました。 事の始まり 私がこの流れを知ったのは下記の記事がTwitterで流れてきたからです。 君はC92の「プロジェクト名未定」または「岩本町芸能社」に気づいたか イベントで爆死したコンテンツのサイトはこちらになります。 公式サイト 上記のブログでも触れられていますが、 2017年8月11日から3日間にかけて、開催された、コミックマーケット92で事前に公式サイトも何も立ち上がっていない「プロジェクト名未定」というブースがありました。 事前準備はしなかったのはコミケ当日
Webデザイナーがアプリを作るというと敷居が高いと思われるかもしれません。 実際私も「アプリなんて無理」と少し前まで思っていましたが、先日iOS/Andoroidの両方でアプリを作る事ができました。 ちなみに公開したアプリはほとんどコードを触っていません。 WordPressを少し知ってる方なら誰でも作れると思います。 公開したアプリ 俺の嫁が可愛い for Andoroid 俺の嫁が可愛い for iOS WordPressのAPIを使って作る WordPressにはWordPress REST APIというものがあってこれ利用すると、ドメインの外部からでも投稿の情報を取得することができます。 実際▲さんが２つのサイトの投稿数を取得して比較するサイトを作っています。 嫁と旦那、どちらの愛が強いか WordPress REST APIを簡単に扱うために必要な事 APIというと複雑なプログラ
Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるための勉強法を紹介します。 概念的なものを知る まずCSSの書き方どうこうを覚えるより、まずはWeb制作の全体感を覚えたほうが、自分が担当する範囲がイメージでき、必要性が見えてくるので覚えやすくなります。 「CSSはコーディングするために必要」という考え方だけだと、どうしても作業的な見方になりがちなのですが、プロセスが見えてくると何をすれば良いのかが見えてくるので、まずは全体像の把握をおすすめします。 全体像を学ぶのは簡単なようで難しいです。 個人的には下記の書籍をオススメします。 Webデザインの新しい教
UI Designer名古屋でUIデザイナをしています。 UIコンポーネントの設計と運用と素早くプロトタイプを作りながらフロントエンドの実装して作りんで行くのが得意です。 最近はStorybookを運用したデザインシステムを作るのに感心があります。 コーギーと暮らしています。
みなさんはWordPressの案件をするときはどんな開発フローをされてますか？ １から作るひともいれば、何かフレームワーク的なものを入れて作る人、スターターテーマを使って作る人、子テーマ前提で作る人など様々な進め方がありますね。 私は去年までは「Underscores」を使って開発していましたが、最近WordPressの開発では、UnderStrapというテーマを使っています。 UnderStrap公式サイト UnderStrapとは UnderStrapは、WordPressの開発元となるAutomatticのUnderscoresのスターターテーマと、レスポンシブにも対応しているBootstrap4を組み合わせたものです。 WordPress.orgの公式テーマディレクトリに掲載されており、管理画面からもダウンロードできます。 スターターテーマは開発を始めるときの手間を減らしてくれる便
最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。 一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。 今回はJSをほぼ書かずに簡単にスクロールアニメーションが設定できる「AOS（Animate On Scroll Library」をご紹介します。 まずは試しに実装してみたサンプルをご覧ください。 サンプルページ AOSとは AOSはAnimate On Scroll Libraryの略です。 公式サイト github 公式デモサイト AOSで出来ること 要素を表示させるアニメーションは「Fade」「Flip」「slide」「Zoom」の4種類が用意されています。 これらにタイミングや速度、上下左右の位置、回転の方向を指定できるのでかかなり自由度が
先日Googleのデジタルワークショップを受講しました。 ワークショップといってもブラウザで受講できる簡単なものです。 無料かつ好きな時間で少しづつ進められるのでご自分の都合に合わせられます。 ネットビジネスについて既に従事している方であればそれほど目新しい発見はないかもしれませんが、人にどうやってWebマーケティングの事を説明したりホームページを活用する方法を伝えたりするのにはすごく便利だなと思います。 もしあなたがネットビジネスの初心者で何から学べばいいか迷っていたり悩んでいるのであれば、受けてみる価値はあると思います。 デジタルマーケティング公式サイト Webマーケティングを体系的に勉強したい人にオススメ Webマーケティングを勉強したいと思ってもなかなかする機会がないのが実情です。 本は売っていますがなかなか体系的に全体を幅広く網羅し、初心者向けに書かれているものは少ない気がしてい
実際私も英語は苦手ですが、Sketchは全然使えています。 ただ初めての方だとSketchの機能が全然わからないと思いますので、メニューを日本語でわかるようにしてみました。 メニュー  メニュー項目の紹介です。 ショートカットキーメモ ⌘…Command（コマンド）キー ⌥…Option（オプション）キー or Alt（オルト）キー ⇧…Shift（シフト）キー ^…Control（コントロール）キー File（ファイル） Edit（編集） Layer（レイヤー） Type（書式） Arrange（整頓） View（表示） File（ファイル） New（新規） ⌘N New From Template（テンプレートから新規） Open（開く） ⌘O Open Recent（最近使用したファイルを開く） Close（閉じる） ⌘W Save(保存) ⌘S Duplicate(複製) ⇧⌘S
最近はSketchを使うことが増えて（というか一択）になっており様々なプロトタイプツールに手を出しているのですがその中でも一番汎用性が高く気にいっているのがInVisionです。 Invisionは英語製なので日本人には敬遠されがちで、あまり機能や便利さが広まっていないと思うので、私が使っている部分になりますがInVisionで出来ることをご紹介します。 inVisionとは InVisionはプロトタイピングツールの一つでアプリやWebデザインのUI/UXをクライアントを含めたチームでコミュニケーションを取るWebサービスです。 EvernoteやAirbnbといった有名企業もinVisionを採用しているほどです。 プロトタイプはプロジェクトに関わる人数が多くなればなるほど、コミュニケーションコストを下げ、円滑に進行が出来ます。 InVisionは最近でもめまぐるしいサービスの更新があ
次のページ
このページを最初にブックマークしてみませんか？
『Home Page | Cntlog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
